How to Build an Author Box in WordPress
Are you claiming your work? A name under the post title is a good start, but what if a reader wants to find out just a little bit more? Are you offering a face to the article? How about a little background? Contact information?
Adding an “About the Author” box to your posts is a simple upgrade to any WordPress blog. In this tutorial, we’ll show you how easy it is to brand your posts in under 10 minutes.
The Goal
WordPress tags make it especially easy to customize your own post’s “About the Author” section. We’ll be making a basic one like the one used on this site in this tutorial. It will load a picture, the name, and description of the post’s author. Here’s a screenshot so you won’t have to scroll to the bottom of the post.
Add the CSS
The CSS below will control the background color, width and text alignment. Change width’s and color schemes as needed to fit your scheme. If you do, remember to give the text enough margin keep it from overlapping the Gravatar image.
#authorbox{
background:#EFEFEF;
border:1px solid #CECFD0;
width:638px;
margin:0 auto;
margin-bottom:10px;
overflow:hidden;
}
#authorbox h4{
font-size:16px;
color:#191919;
margin:0;
padding:10px 10px 5px 10px;
}
.authortext{
padding-left:100px;
}
#authorbox img{
margin:0;
padding:10px;
float:left;
}
#authorbox p{
color:#191919;
margin:0;
padding:0px 10px 10px 10px;
}
#authorbox h4 > a{
text-decoration:none;
}
#authorbox p{
color:#191919;
}Make the Author Box
Everything that appears in the author box is automatically loaded from outside sources. This makes updating surprisingly low maintenance. The code block below loads a Gravatar via the author’s email address, the name with a link to other posts the author has made, and a description loaded from the user’s profile within WordPress. Recall that the div class “authortext” is responsible for keeping text from overlapping the Gravatar icon.
<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>If you’re looking to include any additional author information use the WordPress Codex as a reference for the necessary tags. You can find a live demo of the author box about 100 or so pixels below this paragraph.
Discussion
December 24th, 2008 at 9:50 PM
Interesting tutorial. I’m sure this is an awesome resource if you have a multi-author blog, or even if you have a single-author blog and want to connect with readers more.
December 25th, 2008 at 7:24 AM
Thanks Zach!
That was very helpful – I had to add a few margin lines:
margin-top:10px;
margin-left:10px;
To position the image just right, but it was very easy to do.
Merry Christmas! :)
February 11th, 2009 at 8:16 AM
Thanks for the great tutorial. It was helpful :-)
Greedings
Thomas
March 28th, 2009 at 9:30 PM
Hey, great tutorial, but what files do you place the code in?
Melody’s last blog post..New Twitter Background
March 29th, 2009 at 8:50 PM
@Melody
Chances are, that you’d want to place this into the “single.php” file of your WordPress theme. That is the page responsible for full post views.
March 29th, 2009 at 10:33 PM
@zach
okay, zach–will try it, thanks!
Melody’s last blog post..New Twitter Background
April 6th, 2009 at 6:02 AM
Oh my GOD I can’t believe it worked. My first bit of custom coding!! Very scary, but as you say, all the content is loaded from outside. Maybe I’ll get braver now and try a few other things. Thank you so much for keeping it simple.
Dominique’s last blog post..
April 8th, 2009 at 12:12 PM
That’s what I’ve looking. Thanks.
T-Law’s last blog post..Freebies: Statistics Chart Elements Vector
May 30th, 2009 at 5:01 AM
I was looking for this. Thank you
8bitmag’s last blog post..Tilt-Shift Photography Photoshop Tutorial
June 1st, 2009 at 11:44 AM
I like the idea of this.
It is definitely a great addition.
I do have one modification though. I use regular line breaks in the “Biographical Info” textarea, so I had to modify the code you provide. I think it is actually better to include it this way, though it is entirely up to you:
Again, thanks for such a great addition.
You seem to have a great blog.
Arthur Thornton’s last blog post..Design Project
June 1st, 2009 at 11:46 AM
Well I see that HTML is disabled, so here is the PHP part only:
Arthur Thornton’s last blog post..Design Project
June 1st, 2009 at 11:48 AM
Third comment, sorry for that. Maybe you can remove this and my previous one and put the PHP from this one in my original?
echo nl2br(the_author_description());
Arthur Thornton’s last blog post..Design Project
June 1st, 2009 at 11:59 AM
I should learn to test before posting. Seems WP doesn’t include \n inside the database and as such, it doesn’t work with nl2br. Disregard my previous posts.
Arthur Thornton’s last blog post..Design Project
July 1st, 2009 at 11:34 AM
this code: where i should put: the “add css ”
#authorbox{
background:#EFEFEF;
border:1px solid #CECFD0;
width:638px;
margin:0 auto;
margin-bottom:10px;
overflow:hidden;
}
#authorbox h4{
font-size:16px;
color:#191919;
margin:0;
padding:10px 10px 5px 10px;
}
.authortext{
padding-left:100px;
}
#authorbox img{
margin:0;
padding:10px;
float:left;
}
#authorbox p{
color:#191919;
margin:0;
padding:0px 10px 10px 10px;
}
#authorbox h4 > a{
text-decoration:none;
}
#authorbox p{
color:#191919;
}
.-= sriganesh´s last blog ..demo =-.
July 8th, 2009 at 12:46 PM
thanks a lot for the tutorial! works great on my blog.
.-= Luqmaan´s last blog ..Give your Firefox An Extra Coat of Color =-.
August 2nd, 2009 at 2:36 PM
Thanks for the tut, will try it out in my blog with a few adjustments, great base! :)
.-= h1brd´s last blog ..25 HQ Tribal Tattoo Brush Set =-.
August 18th, 2009 at 4:13 PM
Great post, worked wonders for me, took 2 minutes!
.-= Callum Chapman´s last blog ..Giveaway: 1,000 Full Colour Business Cards! =-.
September 13th, 2009 at 3:30 PM
This worked great for me I tried it on multiple themes. Make sure your using the right css file for your template when entering the code. It had me stumbling for a bit haha
.-= Hara Kim´s last blog ..Is Google Becoming Rusty? Search Failness? =-.
September 16th, 2009 at 6:43 AM
Okay I tried this and it didn’t work.
Does the CSS go at the bottom of my themes main .CDD file?
I assume I put the Second lot of code into the single.php file and if so where do I put it in that file, I have tried a few locations and it still wont display.
November 5th, 2009 at 11:01 AM
Nice and really useful post.Thanks.
.-= Deineshd´s last blog ..October Google Pagerank Update , Bloganol got PR5 =-.
December 1st, 2009 at 7:00 PM
Thank you for your writing. “All the writings of author …” How can we do.
January 23rd, 2010 at 9:12 PM
Looks great!
But I cant for the life of me get it to look pretty on my website, a CSS problem perhaps?
Any help would be much appreciated.
January 29th, 2010 at 10:36 AM
Thanks ;)
February 4th, 2010 at 12:13 PM
Amazing hack. Got that right this time. It looks really good.
February 11th, 2010 at 5:59 PM
Where do I add this code Zach? Please help.
February 11th, 2010 at 6:54 PM
@Kwame
You’re going to want to add it into the single.php file of your WordPress them, most likely below the post content tag.
February 12th, 2010 at 11:02 AM
@Zach
Thanks man. I’m going to try it now.
February 25th, 2010 at 10:00 AM
Lovely… worked like a charm :) superb Zach. I have one more doubt though. How can I change the color of the Author’s comment, like how you’ve done :)
Thanks :)
February 28th, 2010 at 10:04 PM
Lovely worked like a charm. Curious though, how do I make the gravatar bigger? It’s really small and I would like it to be about the same size as yours.
March 2nd, 2010 at 4:42 PM
Thank you very much for the great tut. I applied it to my blog, here :
http://cinema.al-rasid.com/2010/02/27/avatar-2009-2/
March 7th, 2010 at 9:06 AM
Thanks for the great tutorial. It was Very helpful for me …
Regards,
PRaveen
March 14th, 2010 at 5:31 PM
I’ve just used this tutorial to add an Author Box to a client’s WordPress Blog and it worked like a charm.
Thanks so much for the great and easy tutorial.
May 8th, 2010 at 3:38 PM
Great article. Just a note:I was going to use this tutorial but when I checked the WordPress Codex to expand it I saw that the the_author_description() function has been deprecated. I ended up using this tutorial instead because I thought the layout of the box looked better: http://www.designisphilosophy.com/tutorials/build-a-fancy-wordpress-author-box-20100507/
May 10th, 2010 at 8:04 AM
Thanks a lot for this; worked wonders!
June 4th, 2010 at 10:18 AM
that’s cool
Thanks alot
June 5th, 2010 at 7:49 AM
Just what i was looking for…Great tutorial, thanks
June 20th, 2010 at 4:38 PM
Thanks Zach,
but for some reason i cannot get it to work.
The CSS code goes to the Main Template’s CSS File, right ?
~ Tony
June 20th, 2010 at 5:37 PM
Nevermind, I’ve figured it out.
The CSS Code goes into the MAIN CSS file of your CURRENT USED Template, for some reason i’ve put it in the wrong Template. lol.
Thanks, its working well and looks good. =)
July 14th, 2010 at 2:31 AM
Super simple dude, very neat.
One thing you could have added is more detailed look on author tags. I know they are in codex, but codex is usually very basic so exploring the features there would have been nice extra flavor and if you do it good you might end up having a link there. :)
August 14th, 2010 at 1:01 PM
I just added this to my site and removed the plugin that was handling this for me… this way I can reduce my plugin bloat.
Thanks for the easy walk through.
Karl
August 15th, 2010 at 1:12 AM
WOW it is working. But the problem i am getting my gravatar not working. I want to add my own photo how should i do that ?
Please help.;
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.