How to Create an Author Info Section in WordPress

Read the full post

Add to Flipboard Magazine.

It’s common to find an author’s credit and bio at the end of a blog post, especially on blogs that post content from multiple writers. Using a cocktail of WordPress template tags, an info section can be easily put together to showcase the author’s Gravatar profile image, their name, link to their website and short bio.

Example author info section

A typical author info section sits at the bottom of a post, so we’ll add our code in the single.php WordPress file. The aim is to display their name, linked to their personal homepage; automatically pull in their gravatar profile picture; and display a short bio.

Enter the autho info in WordPress

Enter the User Info

The majority of this information is inserted into the WordPress Users section of the admin panel, go ahead and create the user and fill out the relevant fields. Select the appropriate option for how the name should be displayed, enter the user’s website, and complete the Biographical Info.

Write out the HTML

<div id="author-info">
<div id="author-image">
<a href="**Author Website**">**Author Gravatar**</a>
<div id="author-bio">
<h4>Written by <a href="**Author Website**">**Author Name**</a></h4>
<p>**Author Description**</p>
</div><!--Author Info-->

Open up your single.php theme file and write out the initial HTML code. The whole author info section is contained within the div of author-info. Within this, is a div containing the linked gravatar image, followed by a div containing the main author information, such as the author’s name set in a level 4 heading, and the paragraph awaiting the biographical information.

Style up the CSS

#main div#author-info {
	background: #eaeaec; padding: 10px; margin: 0 0 15px 0;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	overflow: auto;
	#main div#author-info div#author-image {
		float: left; margin: 0 10px 5px 0; border: 5px solid #DCDCE1; 

With the HTML in place, the CSS styling can be written out to move everything into place. Here the author-info div is styled up with a grey background, some padding around the edges and a bottom margin. A touch of border radius rounds off the corners and the author-image is floated to the left.

Adding the WordPress Template Tags

<div id="author-info">
<div id="author-image">
<a href="<?php the_author_meta('user_url'); ?>"><?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?></a>
<div id="author-bio">
<h4>Written by <?php the_author_link(); ?></h4>
<p><?php the_author_meta('description'); ?></p>
</div><!--Author Info-->

The dynamic functionality can then be added to the theme file with the use of WordPress’ template tags. Here’s what’s used:

<?php the_author_meta('user_url'); ?>

The the_author_meta() template tag can be used to pull in various snippets of information about the user, in this case it’s used to find the author’s URL.

<?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?>

The get_avatar() template tag is used to grab the author’s gravatar, and the get_the_author_meta(‘user_email’) tag is used to take the place of the user’s email in the parameters.

<?php the_author_link(); ?>

The the_author_link() template tag is used to simply drop in the author’s name, and automatically link it up to their website URL.

<?php the_author_meta('description'); ?>

Finally, the the_author_meta() tag is used once again, this time with the paramater to fetch the user’s description, also known as their biographical information.

Taking the idea further

With the range of template tags available to WordPress, it’s easy to take things that extra step and add new features, why not consider the following in your theme?

Display all posts by user

<p>See all posts by  <?php the_author_posts_link(); ?> </p>

Display user’s post count

<p><?php the_author(); ?> has written <?php the_author_posts(); ?> posts on <?php bloginfo('name'); ?></p>

Link to user’s AIM address

<p><?php the_author(); ?>'s AIM address is <?php the_author_meta('aim'); ?></p>

  • 187
100 HD Blurred Backgrounds

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of 100 HD Blurred Backgrounds + bonus 10 realistic web shadows.

100 HD Blurred Backgrounds

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. You can follow Iggy on Twitter.


  1. Eric B. says:

    I’ve always wondered how to get something like this done. Thanks for sharing!

  2. David says:

    Is it me or is there are tag missing after the gravatar/email call? I tried pasting this code in my template to see how it worked and I all see if the raw code itself. It is not pulling up the right content unless I’m missing something else?

  3. Dzinepress says:

    really helping stuff for took more professional look on our blog.

  4. Ren JK says:

    Thanks for share.

    Adding the WordPress Template Tags, missing the end tag .


  5. Just made some adjustments to the site, it looks like it was stripping out the closing anchor tags previously.

    • David says:

      Nice. It was late last night when I saw this post did a quick check to see how it worked. I knew I wasn’t going crazy lol

      Very nice tutorial and easy to follow and understand.

  6. Josh says:

    An excellent tip and its certainly easy to understand. I’ve tried doing something similar on ExpressionEngine. :)

  7. Matt Ward says:

    Nice work Chris. Super simple, but something that a lot of people could probably use.
    I just implemented something like this a few weeks ago on my own blog!

  8. Nice tutorial Chris. I think I will be adding an author info section on the Design Informer soon.

  9. Tony says:

    Very useful information. Thanks!

  10. Jorge says:

    The information is excellent. Thanks!

  11. Hi Chirs,

    I’ve never dealt with wordpress in this way. But could you easily add some microformats to the author section?

    Would that be a good idea?

    Thanks. Keep up the good work.

  12. Absolutely awesome post Chris. I will be implementing this on my blog very soon!

  13. Sn3g says:

    Wow… great) i’ll do it tommorow

  14. Will Syrett says:

    Nice tutorial!

  15. Another awesome post, been meaning to add this to my blog

  16. kakday says:

    finaly i’m find this tut ,thanks chris

  17. jay design says:

    This is a useful addition to professional looking blogs. Thanks.

  18. scott says:

    Thank you very much. Great article. using it on my site.

  19. Sebastian says:

    thanks chris.
    i was very very lazy, so i solved this via wp-plugin “About the Author Box”. but i never had the chance to be more flexible. i will change this in the nearest future. really nice tut – thx.

    and btw. nice house ;)

  20. jason millward says:

    Good stuff. Been looking how to do this for my site. Will be implementing author info asap.

  21. Kasia says:

    Great stuff and very helpful! Thank you for sharing!

  22. Frog says:

    Chris – Great stuff, a thorough tutorial that covers everything and never needs repeating else where. Bookmarked for sure. The XHTML is pretty simple and isn’t a challenge, the reference to the correct WP tags is the stuff I’m personally interested in.

  23. Ryan says:

    I’ve been using the Carrington framework for this type of stuff, but it involves creating dedicated templates for each author. I like this technique that uses WordPress’s built-in functions better.

  24. Kristof says:

    Thanks Chris – great timing. I just started looking to code this when the post was tweeted.

  25. Nice tutorial. I must give this a try as I dont have any Author section on my blog and would love to have this.
    Thanks Chris

  26. I just implemented this tutorial on my blog and its working perfect. You can see any post on my blog.
    Thanks Chris again!

  27. Michelle says:

    I have implemented this on my blog today due to getting my first guest author. Thanks for sharing this, its been really useful :)

  28. Todd Wallace says:

    I was just looking for a plugin to do this without much luck. Then I ran across a link to this post on another blog. Fantastic stroke of luck. Thanks for sharing.

  29. I can’t stress enough how much I appreciate you putting this up.
    Thank you Chris!

  30. Ed says:


    I’m having trouble getting the text to wrap around the Gravatar… Any suggestions?

  31. Great article, I really enjoy your work and find both of your blogs to be great resources. Thanks man, keep it up!

  32. Wow ! that’s great …..hope to expect more.

  33. Ah, Chris it’s always such a pleasure to read your posts.

  34. iaan says:

    Thanks for the post! Was wondering how to add paragraph spacing to the author description if you want to write a lot?

    WordPress seems to be stripping the tags. any ideas?

  35. Well, you are my hero, I was searching this for a long time instead of installing a crappy plugin. The only problem I have is that the gravatar is in first line and not besides the description of my cool existance.

    Description of my cool existance
    The rest stuff

    However is a good tutorial and I should share this on my blog giving all the credits to you my manner.

    Cheers… My Mind

  36. Evan says:


    Thanks for your useful post. Just want to ask a simple thing… The code is working fine and i am already using it after reading your post can you please tell me why it is showing 32×32 px size by default i tried in code but it is still not changing…. any suggestion?

  37. Bloody says:

    How to place a default message if the member did not fill his biography yet, as the the_author_meta(‘description’) tag is empty ?

  38. Bloody says:

    I found the solution here.
    Here the code adapted to my case.
    It will be able to perhaps inspire certain person.

    <a href="">

    Depuis le , a écrit article(s) sur

    <a href="">

    n'a pas encore renseigné sa biographie. Mais il devrait l'écrire prochainement.N'hésitez pas à repasser pour la lire ...

    Depuis le , a écrit article(s) sur

    I had sought the solution for several days. I found it 5 minutes after my preceding message. :)

  39. Maged says:

    Thanks Chris you are always v.v.helpful
    and outstanding

  40. Rosco says:

    Thanks, what if I have several authors and wanted there photo beside each of there blog post on the index page. What should I do?

    Thanks again.


  41. Karl Foxley says:

    I was trying all the plugins that are available and none seemed to work well with my theme. Your tutorial did the trick and I now have exactly what I was looking for, so a big thank you to you.



  42. Tony says:

    Excellent contents and I’ll try to use some of the info in my site.

  43. Paul says:

    Great post, these wordpress related posts are really helping me out progressing my own blog.

    Thanks again.

  44. textureplus says:

    yep, nice tutorial Chris…there are also other methods for authors info, but your is much better and good moderated. Thanks for sharing.

  45. Tyrone says:

    Chris, cheers for that, that’s one thing I could figure out…

  46. Hi Chris, Thanks a lot for this post. Had been looking for something like this for quite some time.
    Have already added this solution to my bloog! :)

  47. Richie says:

    Brilliant…. Just what I was looking for. I tried several other codes, but this is by the best…..

    You have a great eye for details, Chris. I love those rounded corners :)

    Thanks a lot

  48. noaneo says:

    For put the text of description at right of gravatar, in style.css add
    #author-bio {float: left; font-size: 14px; margin: -7px 0 0 20px; width: 454px;}

Leave a response