WordPress Author Details

Many multi-author blogs have an ‘About This Author’ section attached to the bottom of each post – containing a link to the author’s site and a short Bio about them. In this post, we’ll be creating this, and also an ‘Authors Archive’ page just like the one at NETTUTS:

Part I – On Single Posts

First, we’ll create the area at the bottom of each post. I’m altering the default theme, but feel free to use it in your own themes. Open single.php and find the bottom of the post (after the_content). Insert:

<div class="postauthor">
<?php echo get_avatar( get_the_author_id() , 80 ); ?>

On the second line, we’ve retrieved the author’s Gravatar using their ID. WordPress will output this as an image tag with 80×80 dimensions.
Following on, type:

<h4>Author: <a href="<?php the_author_url(); ?>">
<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>

<?php the_author_description(); ?>

This will display the author’s first and last names, with a link to their website. Below that is their mini biography. All these details are being pulled from the author profile in the Dashboard.

<p><a href="<?php bloginfo('url'); ?>/?author=<?php the_author_ID(); ?>">
<?php the_author_firstname(); ?> <?php the_author_lastname(); ?> has wrote
<?php the_author_posts(); ?> articles for us.</a></p>

</div>

Here we link to the author’s archive page (which we shall create next).

Part II – Author Archive

Create a file named author.php in your theme’s folder. WordPress will automatically use this file to display author archives. Without this file, WordPress would default to using the archive.php file.

At the top we include the basic layout for the header of the default theme. This will most likely be different if you’re using a different theme.

<?php get_header(); ?>
<div id="content" class="narrowcolumn">

Now, include the following:

<?php
if(get_query_var('author_name')) :
$curauth = get_userdatabylogin(get_query_var('author_name'));
else :
$curauth = get_userdata(get_query_var('author'));
endif;
?>

On the single page, we were able to obtain the author’s details directly from the WordPress loop. However since we’re not obtaining a certain post yet, loop functions will not work. The above code will obtain these for us and store them in an array.

<div class="postauthor">
<?php echo get_avatar( $curauth->ID , 80 ); ?>

As you can see, on line 2 we include the Gravatar again, but this time we’re using our new method to retrieve the author’s ID.

<h4><a href="<?php echo $curauth->user_url; ?>">
<?php echo $curauth->first_name; ?> <?php echo $curauth->last_name; ?></a></h4>

^ The author’s name and a link to their site is included; again using the new retrieval method.

<p><?php echo $curauth->description; ?></p>
</div>

Finally, we include the author’s mini biography. You could include any of the author’s details here:

  • $curauth->aim;
  • $curauth->description;
  • $curauth->display_name;
  • $curauth->first_name;
  • $curauth->ID;
  • $curauth->jabber;
  • $curauth->last_name;
  • $curauth->nickname;
  • $curauth->user_email;
  • $curauth->user_login;
  • $curauth->user_nicename;
  • $curauth->user_registered;
  • $curauth->user_url;
  • $curauth->yim;

(Read More: WordPress Codex)

Now include a normal WordPress Loop, displaying the post how you require. Only the author’s posts will be retrieved, so you don’t have to worry about limiting them or anything.
(see here for the rest of the default theme’s code)

Part III – Styling

Include the following at the bottom of your style.css file:

.postauthor {
    background-color: #fafafa;
    border: 1px solid #f3f3f3;
    padding: 10px;
    margin: 10px 0;
    }

.postauthor h4 {
    font-size: 1.2em;
    margin: 0 0 10px 0;
    }

.postauthor img {
    float: left;
    margin: 0 15px 8px 0;
    }

Et Voila!

Download the Source Code

16

Comments
  • Chris Gedrim says:

    That was a nice little easy to follow tutorial, cheers!

    PS ‘… … has written 19 articles for us’ is better English.

  • Drew says:

    Nice article Dan! Simple and easy to follow, keep them coming :)

  • Seich says:

    Nice and Practical, I like it! :P

  • Jay says:

    Nice article, however i have an issue, it wont show the author’s name nor their website, please check, click on my site on my name

  • Wayne says:

    Nice, but the “has wrote” x articles is grammatically painful…

  • Ali says:

    l need to try this

  • Bloggercamp says:

    Wayne already said it… “has written” not “has wrote”. Great tips, good basic styling on the author parts too.

  • billn says:

    Nice approach Dan, but if you only wanted to to show the gravatar and link to author archive of an occasional poster (you don’t want it in every post from the admin do you) how would you approach that?
    Thanks, Bill

  • Trace says:

    Was just creating these for author page and single page and your code helped soooo much. Wasn’t sure why my author page code was not working on single page…. Thank you for writing this, great stuff!

  • dave says:

    hi – this is very informative. Hopefully there is still an ongoing thread on this!

    Wonder if you can help – I want to include CIMY extra fields into the profile. In CIMY help document, it says to get all extra fields values from a specific user, I should do this:

    $values = get_cimyFieldValue(1, false);

    foreach ($values as $value) {
    echo $value['NAME'];
    echo $value['LABEL'];
    echo cimy_uef_sanitize_content($value['VALUE']);
    }

    BUT – what I want to do is get a specific field and show it ONLY on that user’s author page. In the above, I do not want to use the value 1 – I want to use some conditional that shows only the field for that user. Can you help? Manmy thanks!

  • Jenny says:

    awesome! I’m gonna go make one right now :)

  • Carlos says:

    Nice article. But one thing no one seems to address. How to have the author bio ONLY appear on the last page of a multipage article? At the moment, my bios display on each page. I want them to just display on the last page. UI could add a counter in the loop, but how to tell if it reached the last page?

    Tough for me!

  • Shabu Anower says:

    Works perfectly, I’m sharing this article with my readers.

  • I’m so glad I found this site…Keep up the good work

  • Adam says:

    Hi
    Thanks for great article.
    Have copied your code exactly, however nothing appears to work, except for the “has written X articles for us”

    Any ideas what I could be doing wrong?!

    Many thanks for any advice!
    Adam

  • Jabga says:

    Great, everything is working successful for me. Thank you.