Adding an author box to your post footers will help build your personal brand on your blog. An about the author box helps your visitors get to know you, especially first time visitors. And it also is useful on blogs like this that are not personal FIRSTNAMELASTNAME.com blogs, and the picture helps personalize the post. This post will show you how to add an author post box to your WordPress blog, as well as to the Thesis theme.
Step One: Add Bio Info
In your WordPress dashboard, go to “users” and then “your profile” in the left column. Scroll down to the box “biographical info” and click “update profile.” The code we’ll add to your theme pulls the information right from your profile.
Step Two: Add the Box
Open your single.php file and locate the section that is the bottom of the post, right before the comments begin. Every WordPress theme is different, but you’ll want to place the code below before the line “<?php comments_template(); ?>”.
<div id="authorbox"> <?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>
<div class="authortext">
<h4>About <?php the_author_posts_link(); ?></h4>
<p><?php the_author_description(); ?></p> </div>
</div>
This code calls a Gravatar, which pulls a profile image based on the one you’ve assigned to your email address. If you don’t have a Gravatar account, go set one up for free.
If you are using the Thesis theme, you’ll want to add the following code to the custom_functions.php file:
function post_footer() { if (is_single())
{
?>
<div id="authorbox">
<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>
<div class="authortext">
<h4>About <?php the_author_posts_link(); ?></h4>
<p><?php the_author_description(); ?></p>
</div>
</div>
}
}
add_action('thesis_hook_after_post_box', 'post_footer')
Step Three: Style the Box
Add the following code to your style.css (and if you’re using Thesis, add it to your custom.css file).
/* AUTHOR BOX */
#authorbox {background:#fcf8d7; border:1px solid #e2dede; width:495px; margin:0 auto; margin-bottom:0px; overflow:hidden; padding:10px;}
#authorbox h4 {font-size:16px; color:#5a5a55; margin:0; padding:0;}
.authortext {padding-left:100px;}
#authorbox img {margin:0; padding:0px; float:left; border:5px solid #e2dede;}
#authorbox p {color:#5a5a55; margin:0; padding:0px; font-size:10px;}
#authorbox h4 > a {text-decoration:none;}
#authorbox a {font-weight:bold;}
Modify the CSS to match your blog’s theme; otherwise it will look like mine.
That’s it! Let me know if you have any questions in the comments below.
