This is a very short tutorial on how to add an About 
Author Bio Box at the end of your posts just like the one at the end of this post. An author box is very important because it further connects with readers by giving a little background information on the author. I spent 2 days testing different types of plugins for this purpose but could not find any that worked correctly. So I decided to write the code and then this tutorial.
This will require that you access 2 of your template files, however, very little coding is required; just copying and pasting, unless you want to make further customization.
Let’s get started.
Step 1 – Code to call the Author Biography Info
Copy the code below to your single.php (Single Post) file, which is found in WordPress by accessing your Appearance tab then select Editor. Search for the <?php the_content(); ?> line of code, press enter to give some space then copy and paste the code below that line, then save:
<div class="postauthor"> <?php echo get_avatar( get_the_author_id() , 120 ); ?> <h4>Article by <a href="<?php the_author_url(); ?>"> <?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4> <p><?php the_author_firstname(); ?> has written <strong><?php the_author_posts(); ?></strong> awesome article(s) for us. <br/><br/><?php the_author_description(); ?></p> </div>
Step 2 – CSS Files
Copy the CSS code below to your style.css or custom.css file. This will control the background color, width and text alignment. You may change the color schemes as needed to fit your theme.
/* Author's Bio Box */
.postauthor { background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em; }
.postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }
.postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }
.postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; }
Step 3 – Author’s Bio
Add the author’s bio information in the About Yourself section in the WordPress dashboard. Please note that if you wish to add links to the author’s bio, they should be entered using the <a href=”http://www.yourdomain.com”> Your Site’s Name </a> format.
That’s it! I hope this tutorial was simple enough and very helpful.
Questions / Suggestions
Please leave a comment and let me know if this works for you, if its simple enough or if you have an idea for improving the code. There is always room for improvement.
Nice post Robyn.
I saw it on a couple blogs and always wondered how to add it, but then I found the script and added it. It makes the blog look more neater and more organized
.-= Kharim´s last blog ..How To Start A Blog =-.
Thanks Kharim
I know you use the thesis theme, I thought the author box came standard with it. I like using the author box because it acts like a signature for my posts.
very useful tutorial Sam, this could come in very useful. Is there a way to show the post count of a particular author like I see with some other implementations?
.-= Jamaipanese´s last blog ..Tokyo Magnitude 8.0 Anime =-.
here is the code jamaipanese
add this in single.php below the the author code.
article(s) on this Blog.
.-= Dev | Technshare´s last blog ..12 ways to Increase comments on your Blog =-.
Nope thesis doesn’t dome with it. You have to add it manually
.-= Kharim´s last blog ..Making Money Online: Affiliate Marketing vs. Pay Per Clicks =-.
Great post, Robyn. I use Thesis, however. Do you mean I have to manually add a Single.php file? I’d love to implement this, but I’m a little confused about step #1 LOL since Thesis doesn’t have a Single Post file.
Hey Rachel. Thanks for visiting.
The files and procedure for thesis is completely different. I will be posting a special tutorial for adding it to thesis shortly.
Hey Robyn, do you accept guest authors? If so may I have the oppertunity to post the tutorial for tge thesis version?
.-= Kharim´s last blog ..Making Money Online: Affiliate Marketing vs. Pay Per Clicks =-.
Hey Kharim. Just saw your comment. I have actually already posted the tutorial. Sorry about that. You’re still welcome to guest post though. Just register for an account here: http://samswebguide.com/wp-login.php?action=register and let me know.
This is a great tutorial, thanks!
.-= Hummy´s last blog ..The Last Chapter =-.
Thanks for reading.
To add a signature to a post you must first create one; this is done via your profile. Short Url
i have been wondering for the longest on how to do this . Thank you and keep up the good work .
Hi, thanks for this – brilliant. However…I couldn’t get it to work, I believe I did what you said, but the signature is not showing. See link on my name http://www.reenagagneja.com/amega-wand-scam, it should show here. Any help – thank you.
Hey Reena,
I’m sorry to hear you were having difficulties with the code. I have updated my tutorial above which now gives a much simpler and more effective method for adding the author bio box.
Please let me know if this is better. If not, I’ll be more than happy to help you with your theme personally.
I have been trying to do this on my blog for so long. Thank you so much for this simple guide
Glad it helped Toya
Thanks for reading.
Hi Sam,
I did try the above steps and haven’t has much success. I can’t find in the Appearance file…although I have added that code under the content bit (I hope).
I am using Thesis with Just Naked skin.
Any help you can give I would appreciate that.
Thanks
Great info…i was wondering how to add author info….it has surely helped me a lot….thanks for sharing
Great tip. Thank you!
Hi I left a comment above, but no luck so far.
Issue is I can’t find in Appearance – can anyone help??
Hi Reena,
Sorry for not replying sooner.
In your previous comment you said that you are using the Thesis theme. If that’s still the case, please refer to this tutorial: http://samswebguide.com/2010/03/20/how-to-add-an-about-author-box-in-thesis-1-6/
It’s best to use the Custom editor in the Thesis theme options rather than in the wordpress Appearance tab.
Please let me know if this helps. If not then I would need to look at your theme files myself.
Worked perfectly! I would like to add that a plugin such as “User Photo” http://wordpress.org/extend/plugins/user-photo/ really does help in getting, photos of authors (multiple author blogs) importing properly / without the user of Gravitar.
great post for me..thank u brother