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
Follow WPBeginner on YouTube
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 echo get_avatar( get_the_author_meta( 'user_email' ), 70 ); ?>
<h3>About <?php get_the_author(); ?></h3>
<div class="authorinfo">
<?php the_author_meta( 'description' ); ?>
<a class="author-link" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">View all posts by <?php get_the_author(); ?> <span class="meta-nav">&rarr;</span></a>
</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 »
  • Bernadette

    I am a ‘lay person’ I don’t understand how to access CSS files. Could you kindly help me, I run an online magazine and I have 3 writers would like to add author boxes for them.

  • Lon Koenig

    You’re using the get_the_author() form of that function, so you need to echo() it.
    Also, probably a good idea to wrap that in esc_html to avoid possible weirdness.

    But thanks for this post. It set me on the right track.
    And thanks to the commenters for keeping this post relevant.

  • Liz

    Any idea on how to add the author’s field links (e.g. Twitter, Google+, etc.) to the author box?

  • Mrinal

    Hi,

    About seems to be not working. It only outputs ‘About’ without Author name.

    There was an echo problem. I amended the code as About

    Now it works great.

    Thanks.

    • Mrinal

      Oops. Forgot to remove PHP tag. Please make it visible to others also.

      Regards.

  • Graeme Pirie

    With an update to WordPress, get_author_description and get_the_author_email are now deprecated and you should use get_the_author_meta(‘email’) and the_author_meta(‘description’) instead.

    • http://www.wpbeginner.com/ WPBeginner Support

      Graeme, thanks for notifying us. We have updated the article.

  • F. Mireault

    I know this article is 3 years old but wanted to say thanks. I was able to implement the author box on our startup’s blog homepage.

    We added some styling for rounded corners on the profile photo and magic!

    Thanks a bunch.

  • Rupesh Malik

    I am using the free WordPress blog service.

    My blog name is: http://actionwanted.wordpress.com/

    How can I introduce the author box? Your help is appreciated.

  • Lori

    You sir… are awesome for this.

  • Blaine

    Can someone help me? I am trying to add this to a theme that i purchased but when I go to a post, it shows the email and then the image which throws everything out of order. Any way you could do an update of this post with newer practices? I know that the “get_author_description” and “get_the_author_email” are now deprecated.

  • Christopher

    Will this finally get Google+ to recognise me as the author of my posts?
    I’ve tried all of their methods and not one of them works (except e-mail as I don’t have one on my host address).

  • Alexis Guevara

    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.

  • Manoj Rawal

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

  • MavWeb

    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.

    • http://www.wpbeginner.com Editorial Staff

      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.

  • wpbeginner

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

  • CalGavinltd

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

  • http://www.TheNerdyNurse.com/ TheNerdyNurse

    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!

  • http://www.revthatup.com/ Crysislevel

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

  • http://thefreelancepinoy.com/ stefgonzaga

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

  • wpbeginner

    @Mahendra Glad we were able to help :)

  • http://www.vkrokti.blogspot.com Mahendra

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

  • http://tiyangsae.wordpress.com gum

    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?

    • http://www.wpbeginner.com Editorial Staff

      Paste it above the comment code.

  • http://www.McManusPhoto.com Kevin

    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?

    • http://www.wpbeginner.com Editorial Staff

      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.

  • http://www.chrizzle.nl Chris

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

  • http://www.newenlightenedminds.com Rob Elings

    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

    • http://www.wpbeginner.com Editorial Staff

      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.

  • http://vkrokti.com Mahendra

    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

    • http://www.wpbeginner.com Editorial Staff

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

  • Kevin Cooper

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

  • http://blog.turn-leaf.net vlad

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

    • http://blog.turn-leaf.net vlad

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

    • http://www.wpbeginner.com Editorial Staff

      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

  • IS

    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!

    • http://www.wpbeginner.com Editorial Staff

      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.

  • http://twitter.com/cnjara C. Jara

    Excelent! I was looking this for my job ;)

    Thanks!!!

  • http://www.colorexpertsbd.com Mahmudur Rahman

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

  • http://omgzam.com/ Nizam

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

    • http://www.wpbeginner.com Editorial Staff

      It is better if you post it at the end of the loop.