Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add an Author Info Box in WordPress Posts

Last updated on by
BlueHost - Recommended WordPress Hosting
How to Add an Author Info Box in WordPress Posts

Many blogs have an author information box at the end of their posts. This is becoming one of the biggest trends in WordPress blogs. In this article we will show you, how you can add an author information box at the end of your single posts without a plugin.

Screenshot:

Author Info Box in WordPress Posts

First open your style.css file in your themes folder and add this code:

#authorarea{
background: #f0f0f0;
border: 1px solid #d2d2d2;
padding: 10px;
width:500px;
overflow:hidden;
color: #333;
}
#authorarea h3{
font-size: 18px;
color:#333;
margin:0;
padding:10px 10px 5px 10px;
}
#authorarea h3 a{
text-decoration:none;
color: #333;
font-weight: bold;
}
#authorarea img{
margin:0;
padding:10px;
float:left;
border: 1px solid #ddd;
width: 100px;
height: 100px;
}
#authorarea p{
color:#333;
margin:0;
padding:0px 10px 10px 10px;
}
#authorarea p a{
color:#333;
}
.authorinfo{
padding-left:120px;
} 

Note: You might have to modify the CSS file to match your theme formatting.

Once you have added that then open your single.php and add this code inside your loop.

    <div id="authorarea">
    <?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '100' ); }?>
    <div class="authorinfo">
    <h3>About <?php the_author_posts_link(); ?></h3>
    <p><?php the_author_description(); ?></p>
    </div>
    </div>

There are many ways to get the images for the author profile, but we used Globally recognized Avatars, Gravatar. This code will get the avatar associated with the author’s email.

If you have any questions, feel free to ask in the comments.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Alexis Guevara says:

    I’ve been using wordpress now for a few months, I just got back into the design game, and I still consider myself a beginner. I popped it in my custom theme, and with a little Css it was working beautifully. Bravo! Thank you for the short cut.

  2. Manoj Rawal says:

    helpful article it’s nice to see we can add author box without any wordpress plugin.

  3. MavWeb says:

    Thanks for this great post.

    The CSS Layout doesn’t work for me with Twenty Eleven. So,I need to have a custom theme. The author bio is not floating arount the gravatar and the whole block is not centered.

    • Editorial Staff says:

      We would have to see the code to determine what’s going wrong. The code should work perfectly fine unless there is another class with the same name in the CSS.

  4. wpbeginner says:

    @CalGavinltd Somewhere in your CSS, there has to be a property: text-transform: uppercase; You need to get rid of that.

  5. CalGavinltd says:

    For some reason the author title is in caps how do I change this?

  6. TheNerdyNurse says:

    I want to do this, but editng the code scares the crap out of me!

    I much prefer a plugin to do it for me!

  7. Crysislevel says:

    thanx. i already have a author box enabled by default on my alltuts theme! in case i needed to style it..this is a gr8 tutorial! :)

  8. stefgonzaga says:

    I’m using the YARPP plug-in and it’s always displaying on top of the author box. I’m not good with PHP so I don’t know how to tweak the settings for it to appear below the the_content(); hook. Any tips you could provide? Thanks! :)

  9. wpbeginner says:

    @Mahendra Glad we were able to help :)

  10. Mahendra says:

    Superb! I was looking for it for a long time. just now did it successfully after reading this article. Thank you very much!

  11. gum says:

    hi, i followed your tutorial and insert the html/php code right at the end of the loop, but the author box is displayed below the comment section.

    did i miss something?

  12. Kevin says:

    I am using a parent and child theme combination. The single.php file is in the parent theme and shows -

    “<?php
    /**
    * WARNING: This file is part of the core Genesis framework. DO NOT edit
    * this file under any circumstances. Please do all modifications
    * in the form of a child theme.
    *
    * This file handles posts, but only exists for the sake of
    * child theme forward compatibility.
    */
    genesis();

    The CSS code was easy but where do I put the PHP code in the child theme?

    • Editorial Staff says:

      You are using Genesis. This feature is already built in. Go to your User Profile page, and turn it on. No need to use the code on this article.

  13. Chris says:

    Shared And Liked, Thanks for this greatfull tutorial, its always better to cardcode things in you’re template folder instead of adding way to many plugins (:

  14. Rob Elings says:

    Hi, thanks so much for this tutorial. I got it to work real nicely after I tried several plugins that just wouldn’t.

    Here’s a question. How can I move the Author box to appear above the related posts? See: http://www.newenlightenedminds.com/2010/10/letting-go-movie-trailer/

    Any help would be much appreciated.
    Tx
    Rob

    • Editorial Staff says:

      That will depend on which plugin you are using… From the looks of it, the related post plugin is adding the posts at the end of the_content(); hook. So you would have to disable the plugin and tweak it to fit your needs.

  15. Mahendra says:

    Simply Superb.
    I was so looking up for this. tried different plug in but couldn’t get the right things. what you did is without plug in is really Great.

    Just wanted to know how can we show the number of post in the same code ?

    I am managing a multi author blog on my main site

    • Editorial Staff says:

      You can add this code: <?php the_author_posts(); ?> and it will show the count of posts done by that author.

  16. Kevin Cooper says:

    How can I exclude the admin author from appearing? Thanks!

  17. vlad says:

    Is there a way to exclude the author box from a specific category? Please help. Thank you very much!

    • vlad says:

      p.s. thank you for this tutorial, it worked perfectly!

    • Editorial Staff says:

      Yes… You can use the conditional tag is_category (then display nothing) else display this. Or the easier way to do this would be creating a separate single.php for that specific category and remove this code. All you have to do is create single-categoryname.php or single-categoryid.php

  18. IS says:

    I love the Comment box you have on your site! Is it a plugin or did you code it yourself? Can you help me get my comment box looking like that! ALSO, What plugin are you using to have the twitter and facebook widget on the lefthand side of your screen?
    Thanks in advance! BTW, your site is super clean, I love the layout!

    • Editorial Staff says:

      The only plugin we are using for the comment box is subscribe to comment. Everything else is simple codes. For the floating widget, we are going to be releasing that plugin for free in the coming week, so stay updated.

  19. C. Jara says:

    Excelent! I was looking this for my job ;)

    Thanks!!!

  20. Mahmudur Rahman says:

    Awesome post with nice explanation. I was searching these codes for my blog post. Thanks for sharing this nice post. :)

  21. Nizam says:

    For the loop, do I need to paste it specifically or can I just paste at the end of the file?

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.