How to add an “about the author” box to your Wordpress posts
February 12, 2010 in Latest Posts, Tech Tips by Kimmy 23 Comments » 3,213 views
I’m sure you’ve see them all over at the end of blog posts, those cute little “about the author” boxes with the writer’s avatar and a few sentences of information about them. I believe that these are important for helping your readers get to know you, especially the ones who have never been to your site before. It helps give people who aren’t familiar with you a little bit of who you are and the picture helps really personalize the post.
You can see what I am talking about at the bottom of this post, and below are screenshots from Trisha’s and my personal blogs showing our about section that shows up automatically at the end of each of our posts.
Did you know that if you have a Wordpress blog, the function for this “about the author” section is ALREADY BUILT IN?
Yep.
All you have to do is tell your theme to activate it.
And it’s easy!
A simple section of PHP code, a couple of quick additions to your style sheet, and your “about the author” box will appear every time you write a post.
STEP ONE – ADD THE INFO
In your Wordpress dashboard, go to “users” then “your profile” in the left menu. Scroll down and fill in the little box that says “biographical info” and click on update profile. The code we are going to add to your theme pulls the information right from your profile.
STEP TWO – MAKE THE BOX
I generally recommend using an HTML editor program (I use PSPad, it is free) for editing any of your theme files. You can them copy them back over via FTP and it gives you more control in case you made a mistake. But this is such an easy thing, you are probably ok editing your theme right from the Wordpress dashboard if that is what you prefer.
Open your single.php file and locate the part that is the bottom of your post, right before your comments template starts.
Every theme is different, but you need to look for this line of code:
<?php comments_template(); ?>
And then place this bit of code BEFORE it:
<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>
Now, some themes have some parts of the comments that start before the comments template, so you may have to move that around if it doesn’t quite show up where you thought it would.
This code calls a Gravatar based upon the author’s email address, so if you don’t have a Gravatar account, go get one. It’s free.
STEP THREE – STYLE IT
Open your style.css and place this bit of code in it. You can technically place it anywhere, but if your stylesheet is well laid out, and has the sections divided, I would put it with other post related styles to make it easier to find for editing.
#authorbox {background:#4E3E2C; border:0px solid #CECFD0; width:688px; margin:0 auto; margin-bottom:0px; overflow:hidden; padding:10px;}
#authorbox h4 {font-size:16px; color:#B34040; margin:0; padding:0;}
.authortext {padding-left:100px;}
#authorbox img {margin:0; padding:0px; float:left; border:5px solid #FFFFFF;}
#authorbox p {color:#FFFFFF; margin:0; padding:0px;}
#authorbox h4 > a {text-decoration:none;}
#authorbox a {font-weight:bold;}
You will need to modify the specifics to match your theme, otherwise it will match mine.
Voila!
Instant “About the Author” box. Ok, maybe not instant, but easily 15 minutes or less.
~Kim
Has anybody tried this using the Thesis theme? I’m just not sure where to put the .php info.
Thanks.
I wish I could get this to look nice on my blog but it’s all messed up … I will have to play some more with the coding as it’s too long and I have to figure out my color codes for site … also can’t figure out how to place it above my google adsense .. I want it immediately after the post .. UGH! More playing and I am sure to get it as this was super easy step by step instructions!
Thanks!
Thanks so much Kim!!! I just got it.
Thanks so much for this!
Whoo Hoo! Love it thanks.
Darn. I don’t have a single.php file either.
Great info, thanks! I can use this.
Thanks Kim! Super easy and looks so clean.
uumm…how do you get rid of all the numbers?? I have random
1
2
3
4
5 all over the place….
When you copied the code you grabbed the numbers too, just go back in and delete the numbers
Candy, thanks for answering her, I totally missed this!
I love those, just added one to my posts
First off – so glad I found this post via Twitter. Secondly, I’m so glad you shared this. I have to mess with my CSS a little more but for now what I have up is working! (I just can’t get the background figured out yet).
Thanks!
Got the info up, but no so much with the box. HALP?
Cool information. Seen this on articles, but never thought about adding this block at the bottom of my blogs. Thanks for the tip.
I also don’t have a single.php file, but I’ll try what Cindi did.
Thanks!
Figured it out – put it in the index.php section above the comment area and it works great
I did it! Didn’t give up, your going to turn me into a coding genius! Thanks so much!
Cindi,
That is fantastic, good for you!
Thanks for the information. This is awesome to know, I have been wondering about this myself lately.
Thanks for the instructions!
I don’t have a single.php file, so I just added it into my Comments.php file, but I’m not able to get the background or border to show.
Cool Thanks Kim, That was really easy ! Mine is up and working , great post ! Can’t wait for the next one. Maybe Numbering comments Hint Hint
I love these-you can even put them at the beginning of a post (but I prefer the end). It’s nice-in that you get a tidbit of info about the author w/o having to go search for an “about” page-only to find that some don’t have one.