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.

Wordpress Author Box

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.


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.

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.

Posted Saturday, December 13th, 2008 · Back to Top

SPONSOR

Add Comment

90 Comments 14 Mentions

  1. Corey Freeman Author Editor

    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.

    ·

  2. Ed Author Editor

    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! :)

    ·

    • Brian Author Editor

      Nice one Zach.

      Not one for code but this looks pretty straight forward. Will give it a go.

      Cheers mate

      ·

  3. hombertho Author Editor

    Thanks for the great tutorial. It was helpful :-)
    Greedings
    Thomas

    ·

  4. Melody Author Editor

    Hey, great tutorial, but what files do you place the code in?

    Melody’s last blog post..New Twitter Background

    ·

    • Zach Dunn Author Editor

      @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.

      ·

  5. Melody Author Editor

    @zach

    okay, zach–will try it, thanks!

    Melody’s last blog post..New Twitter Background

    ·

  6. Dominique Author Editor

    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..

    ·

  7. T-Law Author Editor

    That’s what I’ve looking. Thanks.

    T-Law’s last blog post..Freebies: Statistics Chart Elements Vector

    ·

  8. 8bitmag Author Editor

    I was looking for this. Thank you

    8bitmag’s last blog post..Tilt-Shift Photography Photoshop Tutorial

    ·

    • RealTimeTricks Author Editor

      Please share your experience on how you added and what response you get when you added the author box.

      ·

  9. Arthur Thornton Author Editor

    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

    ·

  10. Arthur Thornton Author Editor

    Well I see that HTML is disabled, so here is the PHP part only:

    Arthur Thornton’s last blog post..Design Project

    ·

  11. Arthur Thornton Author Editor

    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

    ·

  12. Arthur Thornton Author Editor

    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

    ·

  13. sriganesh Author Editor

    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 =-.

    ·

  14. Luqmaan Author Editor

    thanks a lot for the tutorial! works great on my blog.
    .-= Luqmaan´s last blog ..Give your Firefox An Extra Coat of Color =-.

    ·

  15. h1brd Author Editor

    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 =-.

    ·

  16. Callum Chapman Author Editor

    Great post, worked wonders for me, took 2 minutes!
    .-= Callum Chapman´s last blog ..Giveaway: 1,000 Full Colour Business Cards! =-.

    ·

  17. Hara Kim Author Editor

    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? =-.

    ·

  18. Jason Saggers Author Editor

    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.

    ·

  19. Deineshd Author Editor

    Nice and really useful post.Thanks.
    .-= Deineshd´s last blog ..October Google Pagerank Update , Bloganol got PR5 =-.

    ·

  20. Bahattin ARICI Author Editor

    Thank you for your writing. “All the writings of author …” How can we do.

    ·

  21. Henry Author Editor

    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.

    ·

  22. lawrence77 Author Editor

    Thanks ;)

    ·

  23. gautam hans Author Editor

    Amazing hack. Got that right this time. It looks really good.

    ·

  24. Kwame Author Editor

    Where do I add this code Zach? Please help.

    ·

    • Zach Dunn Author Editor

      @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.

      ·

  25. Kwame Author Editor

    @Zach

    Thanks man. I’m going to try it now.

    ·

  26. Richie Author Editor

    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 :)

    ·

  27. Kirei Author Editor

    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.

    ·

  28. Mouad Author Editor

    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/

    ·

  29. Praveen Author Editor

    Thanks for the great tutorial. It was Very helpful for me …
    Regards,
    PRaveen

    ·

  30. Diane Bourque Author Editor

    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.

    ·

  31. Josh Author Editor

    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/

    ·

  32. Arif Author Editor

    Thanks a lot for this; worked wonders!

    ·

    • Lena Author Editor

      What I find so interesting is you could never find this aynwrehe else.

      ·

  33. dattai Author Editor

    that’s cool

    Thanks alot

    ·

  34. Laura Author Editor

    Just what i was looking for…Great tutorial, thanks

    ·

  35. Antonio Fuentes Author Editor

    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

    ·

  36. Antonio Fuentes Author Editor

    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. =)

    ·

  37. Toni L Author Editor

    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. :)

    ·

  38. Karl Foxley Author Editor

    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

    ·

  39. Chandra Author Editor

    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.;

    ·

    • small business web design software Author Editor

      4431 payday loan without bank account [link=http://canada-paydayloans.ca/]payday loan providers[/link] small business web design [link=http://www.smallbusinesswebdesign.co.uk]kansas city small business web design[/link] small business web design indianapolis [link=http://www.i-newswire.com/small-business-web-design-services/192949]small business web design chicago[/link].

      ·

  40. Sp0nky Author Editor

    Hi.I have spent a lot of time and this code is working fine.
    Thanks very much.
    I should learn about how to customize the comments..and thats it :)

    ·

  41. Doug Author Editor

    It worked first time out! (with a few cosmetic adjustments to the CSS) Clean and simple code. Well done.

    Thanks.

    ·

  42. Computer Tips and Tricks Author Editor

    I dont use wordpress but this will surely help in the future

    ·

  43. Top Models Magazine Author Editor

    This tutorial will surely help us to creat such author box. Thank you so much Zack :)

    ·

  44. Michael Author Editor

    Wow! Exactly what I was looking for. Was piecing through the comments template in my theme to find this code but had no luck. Thanks again! Simple and compact!

    Michael

    ·

  45. pirmax Author Editor

    Thanks you very much ;)

    ·

  46. Avenue Author Editor

    I have the Simple one

    ·

  47. RealTimeTricks Author Editor

    Nice tutorial buddy but what if one is using thesis, where he add this CSS?

    Also would you like to give another tutorial on how you added “author” and “editor” tab next to your name in comments?

    Regards
    Irfan Siddiqui

    ·

  48. Shane Author Editor

    Thanks for this tutorial! Just applied it to two of my sites and it’s a far superior solution to what I had before! :)

    ·

  49. Ganesan K Author Editor

    HI,

    Thank you for posting a nice about author tab in wordpress. it would helpfull for us..

    ·

  50. zonac Author Editor

    it’s works good…
    But do you have any solution to not display this box for one user…
    For example in my site exists articles of none registered users, all they are posted from the admin account. Can i hide this admin box in post

    ·

  51. muneer jinnen Author Editor

    i have added it on my website

    ·

  52. Michael Author Editor

    I’ve nicely done this for my website. Thank you very much Zach. My site looks better now.

    ·

  53. Matija Author Editor

    Interesting tutorial, i’m new to the wordpress, and i must admit that this helped me a lot. Zach is the best!

    ·

  54. Peter Author Editor

    Phew… Thought it wouldn’t work due to the time since the post was created. Took me a little longer than most I guess but got it to work as well. Thanks heaps Zach.

    ·

  55. Việt Designer Author Editor

    This author box look so cool, i will make one for my site ;) Thanks!

    ·

  56. Bob Author Editor

    Hi Zach. I use this code in my site and it worked properly. Thank you so much for the code.

    ·

  57. arsie Author Editor

    works like a charm… thanks for sharing this.. i’d be adding some more information though for my website.

    ·

  58. José Author Editor

    Thanks, very clear and useful!!

    ·

  59. gamis murah Author Editor

    nice share..anyway is there any other way to make this author box? because i used one of the master blogger template in which author box..i want to remove or change to myself author box…I’ve gone to edit html…but can’t find the code…confusing…ups almost forget…his template originally wordpress template but modified to blogger template…any body knows how to solve this? all respond appreciated thanks

    ·

  60. Peter Author Editor

    Hey Zach …nice one buddy thanks for that. Easy to set up and looks good.

    ·

  61. Vivien Author Editor

    Now i know how to build.

    ·

  62. Inspirational Quotes Author Editor

    Wow, marvelous blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your web site is excellent, as well as the content!. Thanks For Your article about How to Build an Author Box in WordPress | Build Internet .

    ·

  63. Venice Airport Author Editor

    I have been absent for some time, but now I remember why I used to love this website. Thank you, I will try and check back more frequently. How frequently you update your web site?

    ·

  64. Louis Vuitton Taiga Leather Multiple Grizzli M30958 Canada Author Editor

    Hello There. I found your blog using msn. This is a very well written article. I’ll be sure to bookmark it and return to read more of your useful info. Thanks for the post. I will definitely return.

    ·

  65. Inspirational Quotes Author Editor

    How to Build an Author Box in WordPress | Build Internet I was suggested this blog by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my difficulty. You are wonderful! Thanks! your article about How to Build an Author Box in WordPress | Build InternetBest Regards Nick

    ·

  66. longchamp handbags sale Author Editor

    It seems too complex and very comprehensive for me. I am awaiting for your next essay, and I plan to try to comprehend it! In fact the write-up is spreading its wings swiftly, looking for it…

    ·

  67. Som Author Editor

    nice info .It worked . I have already edited the default css file and added the code mentioned below to the single.php file .It just added a resource box at the bottom of any post .But it can’t fetch the text and link data of an user or author as shown in the profile page .It is just showing the author-name with a link .How to get the full data displayed including link and bio under a post ? any idea ?

    ·

  68. Scientific Calculator Author Editor

    I have been exploring for a little for any high quality articles or blog posts on this kind of house . Exploring in Yahoo I ultimately stumbled upon this site. Studying this information So i am glad to convey that I’ve a very good uncanny feeling I discovered exactly what I needed. I most undoubtedly will make sure to do not disregard this site and give it a look on a continuing basis.

    ·

  69. Beats by dr dre Author Editor

    Appreciate for helping to discuss this thoughts and opinions, I feel intensive about idea and would like to learn a lot of things on this element. Probably, as you abtain knowledge, would you notice renewing your blog with quantities of more info? It’s very great for me.

    ·

  70. Biuro Podróży Author Editor

    Just want to say your article is as surprising. The clarity in your post is simply nice and i can assume you are an expert on this subject. Well with your permission let me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please carry on the rewarding work.

    ·

  71. tpain Author Editor

    Right. I imagine it is. Very good post, weird how I found this blog.

    ·

  72. le pliage longchamp Author Editor

    I dicovered this is a helpful and funny publication, so I think it is very benificial and knowledgeable. Many thanks for the efforts you have made in writing this write-up. I am expecting the same great work from you in the future as well. practically your creative writing ability has inspired me.

    ·

    • pheromonoes Author Editor

      [url=http://buypheromones.webs.com/]pheromonoes[/url] kxqz8iknqr6j, 864 [url=http://usepheromones.webs.com/]pheromones job interview[/url] 7dafxzirf8o3wg, 9807 [url=http://pheromone101.webs.com/]pheromones.co.za[/url]

      ·

  73. Bank Card USA Author Editor

    These assholes play like this ALL THE TIME. Why people need someone important on the world stage to confirm what they already know, is simply retarded. I dont give a flying fuck what these pricks say, I know what the score is.

    ·

  74. pozycjonowanie malopolska Author Editor

    Some genuinely nice and utilitarian info on this internet site, too I believe the design has fantastic features.

    ·

  75. Debajyoti Banerjee Author Editor

    We have developed a WordPress plugin Easy Author Box that would solve the purpose and also you can place your social profiles there such as Facebook, Google+, Twitter & Email. Check it out here – http://www.7boats.com/wordpress-plugins/rohini/

    ·

  76. Adam at Binaural Beats Author Editor

    Do you know how to add the author box to other areas of your website such as pages? Or maybe you want the author box in the middle of a post for some reason… Is there anyway to do this?

    ·

  77. Katak Author Editor

    Cool! I like!

    ·

  78. Myar Author Editor

    Hi!

    This is a great tutorial! I used it on my page. But the Authors avatar is not left to the Text but above it. I copied your css, but it doen’t looks like yours?

    ·

  79. Help To Stop Snoring Author Editor

    I have been using a table then simply copying it and pasting into the HTML section of a post, but it does not seem to stick correctly. Will certainly give this a go instead. Cheers Zach

    ·

  80. Internet Courses Author Editor

    You have remarked very interesting details ! ps decent web site . “Justice is the truth in action.” by Jeseph Joubert.

    ·

  81. Arturo Balter Author Editor

    I am not sure if my subscription info came via to you nor am I clear how to pay the $5.00.
    Thanks this is often a excellent idea if I’m able to connect! Judy

    ·

  82. ดารา Author Editor

    Sweet blog! I found it while browsing on Yahoo News.
    Do you have any suggestions on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get there! Many thanks

    ·

 

Build Internet by One Mighty Roar. Since 2008.