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.
{ 8 comments… read them below or add one }
what a wonderful tutorial. This was so easy and it's great that they can use the bio section to change their bios on the fly.
Thanks so much for this!
Thanks Diane, a couple of php errors caused me problems, but I figured it out.
In step two, you are missing
“ before
“}
}”
and closing “;” at the end.
Also you should mention that for thesis, you can skip the single.php part.
Thank you Diana. This is a wonderful tutorial and really worked perfectly! I used the Open Hooks plug-in for thesis and just had to add the first set of code to the thesis_hook_after_post_box hook. Easy as pie!
I’ll be incorporating this on my blog soon. Thank you for your clear and concise instructions. I concur with cynthialil that the ability to change bio info by simply updating the WordPress biographical information section is a very nice touch.
Great information, if I knew where to actually put it. When you look at these codes, it’s so intimidating when you paste something and it messes your site up and then you can’t even log back in.
The first step was great because you actually said where to put it exactly, but the rest of the steps lost me. Does it go before this or that (exact words) ? Sorry I am lost and I don’t speak code. I messed my site up last time doing this.
Any help?
f you are the only one who post on your blog it is still good to have an about author box somewhere. People will consider your articles more valuable if they know who wrote them ? This is happening because they want something to see to consider it worth reading. There are so many spam websites with articles written only for search engines or with comment stolen from some other website.Add aIf they see an author box with an image they will think there are more chances that the content in original and is not spammy. Visitors tend to subscribe to a blog where they see the author name and face. Not every article from your blog will be an excellent piece of work, but from time to time you will write a very compelling article that your readers will remember or will bookmark it to read again some other time. They will want to associate that article with a human, with a face. Your visitors will come back more and you will have more subscribers.uthor box to your blog to tell your visitors who you are
f you are the only one who post on your blog it is still good to have an about author box somewhere. People will consider your articles more valuable if they know who wrote them ? This is happening because they want something to see to consider it worth reading. There are so many spam websites with articles written only for search engines or with comment stolen from some other website.Add aIf they see an author box with an image they will think there are more chances that the content in original and is not spammy. Visitors tend to subscribe to a blog where they see the author name and face. Not every article from your blog will be an excellent piece of work, but from time to time you will write a very compelling article that your readers will remember or will bookmark it to read again some other time. They will want to associate that article with a human, with a face. Your visitors will come back more and you will have more subscribers.uthor box to your blog to tell your visitors who you are
Thank you so much for an easy, almost anyone can understand tutorial!