How to add an “about the author” box to your WordPress posts

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:

[sourcecode language="css"]
<?php comments_template(); ?>
[/sourcecode]

And then place this bit of code BEFORE it:

[sourcecode language="css"]
<div id="authorbox">
<?php if (function_exists(‘get_avatar’)) { echo get_avatar( get_the_author_email(), ’80′ ); }?>
<div>
<h4>About <?php the_author_posts_link(); ?></h4>
<p><?php the_author_description(); ?></p>
</div>
</div>
[/sourcecode]

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.

[sourcecode language="css"]
#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 &gt; a {text-decoration:none;}
#authorbox a {font-weight:bold;}
[/sourcecode]

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.