Adding About the Author Box Below each Post in WordPress

Whenever a reader likes any article he looks for the author, to know more about him, to connect with him/her. About the Author Box below the post is the best place to display some information about the author. Especially in a multi-author blog each author should get proper credits for his/her post(s).

A small thumbnail, a one line description with some links to the Author’s online social accounts does great. In this article I’ll be providing you with the procedure to add About the Author Box at the bottom of each post in WordPress.

Sample Author box:

Procedure to add an Author Box below each post in WordPress

1.) Add the following code to your theme’s Style.css file. (Dashboard->Appearance->Editor->Style.css)

/* Author Box */
#author-info { background: #eee; padding: 10px; margin: 10px 0 0 0; font-size:12px; overflow: auto; }
#author-font { font-size:19px; }
#author-image { float: left; margin: 0 10px 5px 0; border: 5px solid #DCDCE1; }

You can change the background color of the box by editing the “background: #eee” value in the above code. Replace “#eee” with any of the hexadecimal color code you wish.

2.) Copy the following code to your theme’s Function.php file. ( Dashboard->Appearance->Editor->Functions.php )

Note: Be careful while editing functions.php, put this code before closing (?>) php tag.

// Add Twitter, Facebook and Gender profile field in user profiles.
function add_twitter_contactmethod( $contactmethods ) {
// Add Twitter
$contactmethods['twitter'] = 'Twitter';
// Add Facebook
$contactmethods['facebook'] = 'Facebook';
// Add Gender
$contactmethods['sex'] = 'Sex(m/f)';
return $contactmethods;
}
add_filter('user_contactmethods','add_twitter_contactmethod',10,1);

This code will add Twitter, Facebook and Gender Profile fields in user profiles.
Enter the Twitter id (example: namit_gupta), Facebook (example: namitgupta15), Gender (exaple: m)

Also see: How to set Vanity URL for Facebook Profile

3.) Copy the following code to your theme’s Single.php file. ( Dashboard->Appearance->Editor->Single.php )

<div id="author-info">
<div id="author-image">
<a href="<?php the_author_meta('user_url'); ?>"><?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?></a>
</div>
<div id="author-font">Article by <a href="<?php the_author_meta('user_url'); ?>" rel="nofollow" target="_blank"><?php the_author_meta('first_name');?> <?php the_author_meta('last_name');?></a></div>
<div style="line-height: 2;">
<p><em><?php the_author_meta('description'); ?></em></p>
<?php
if(get_the_author_meta('facebook') || get_the_author_meta('twitter')){
if(get_the_author_meta('sex') == "m"){
?>
<p>Connect with him on
<?php
}
if(get_the_author_meta('sex') == "f"){
?>
<p>Connect with her on
<?php
}
if(get_the_author_meta('twitter')){
?>
<a rel="nofollow" href="http://twitter.com/<?php the_author_meta('twitter'); ?>" target="_blank"><b>Twitter</b></a>
<?php
}
if(get_the_author_meta('facebook') && get_the_author_meta('twitter')){
?>
and
<?php
}
if(get_the_author_meta('facebook')){
?>
<a rel="nofollow" href="http://facebook.com/<?php the_author_meta('facebook'); ?>" target="_blank"><b>Facebook</b></a>.</p>
<?php
}
}
?>
</div>
</div><!--Author Info-->
</div>
</div>

The above code will display Author’s Name, Description, links to Twitter and Facebook Profile and website link from the user profile. So be careful while entering details in the user profiles. I am using the same code on this blog.

Feel free to comment if you experience any problem.