Line25

How to Create an Author Info Section in WordPress

Read the full post

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>
<div id="author-bio">
<h4>Written by <a href="**Author Website**">**Author Name**</a></h4>
<p>**Author Description**</p>
</div>
</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>
<div id="author-bio">
<h4>Written by <?php the_author_link(); ?></h4>
<p><?php the_author_meta('description'); ?></p>
</div>
</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>
Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://fwebde.com/ Eric B.

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

  • David

    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?

  • http://www.dzinepress.com Dzinepress

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

  • http://twitter.com/renjunkui Ren JK

    Thanks for share.

    Adding the WordPress Template Tags, missing the end tag .

    ;)

    • http://twitter.com/renjunkui Ren JK

      <a href="<?php the_author_meta(‘user_url’); ?>"><?php echo get_avatar( get_the_author_meta(‘user_email’), ’80′, ” ); ?></a>
      Right?

      • http://www.nardi.me Felippe Nardi

        Thank you for sharing

        • Demmi

          xD

        • Dave

          Sick!

  • http://twitter.com/chrisspooner Chris Spooner

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

    • David

      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.

  • http://www.trippingwords.com Josh

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

  • http://blog.echoenduring.com Matt Ward

    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!

  • http://www.thewebtuts.com TheWebTuts

    Tutorial added to thewebtuts.com

  • http://designinformer.com Design Informer

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

  • http://www.willsyrett.com Will Syrett

    Nice tutorial!

  • http://designrfix.com Tony

    Very useful information. Thanks!

  • http://www.lojatour.com Jorge

    The information is excellent. Thanks!

  • http://darrenazzopardi.co.uk darren azzopardi

    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.

  • http://www.threestyles.com Three Styles | Shane Jeffers

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

  • http://moeseo.ru/ Sn3g

    Wow… great) i’ll do it tommorow

  • http://muria.or.id kakday

    finaly i’m find this tut ,thanks chris

  • http://drawne.com Andy Feliciotti

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

  • http://www.proofofbrain.com scott

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

  • http://www.creare.co.uk jay design

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

  • http://www.inspiredcss.com jason millward

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

  • http://www.twitter.com/madmax2600 Sebastian

    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 ;)
    /sebastian

  • http://www.sheglam.com Kasia

    Great stuff and very helpful! Thank you for sharing!

  • http://www.thefloatingfrog.co.uk Frog

    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.

  • Ryan

    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.

  • http://www.kristofcreative.com Kristof

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

  • http://www.smashingshare.com Waheed Akhtar

    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

  • http://www.abhinavbhatt.com AB

    Informative!

  • http://www.smashingshare.com Waheed Akhtar

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

  • http://www.kaplang.com/blog Michelle

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

  • http://www.binaryhaiku.com Todd Wallace

    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.

  • http://itolmach.com Ivan Tolmachev

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

  • http://www.uniterant.co.uk Ed

    Thanks!

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

  • http://brandonleekitajchuk.com Brandon Kitajchuk

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

  • http://www.contentmixi.com/ best website templates

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

  • http://www.redbilby.com.au Michael Chanter

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

  • http://www.twitter.com/iaanvn iaan

    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?

  • http://www.conceptopixel.com Luis Lopez G.

    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.

    Gravatar
    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

  • http://www.iamwebsitedeveloper.com Evan

    Hi

    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?

  • http://www.chantdeleau.com/wordpress/ Bloody

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

  • http://www.chantdeleau.com/wordpress/ Bloody

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

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

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

  • Maged

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

  • Rosco

    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.

    Rosco

  • http://www.fmsseo.com/blog Karl Foxley

    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.

    Regards,

    Karl

  • http://www.bontemedical.com Tony

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

  • http://paul-sizer.com Paul

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

    Thanks again.

  • http://www.texturepl.us textureplus

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

  • http://www.mayhemdesignstudio.co.uk Tyrone

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

  • http://www.ewebbuddy.com Piyush Agarwal

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

  • http://richworks.in Richie

    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

  • http://noaneo.fr/ noaneo

    hi,
    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;}