Justin Tadlock

Doing more with gravatars: Part 2

Using gravatars for an author's bio

Using WordPress gravatars for an about me section

We’ve learned how to spruce up our comments sections a bit with the first part of this series. Now, we’ll cover an about the author section for single posts.

I think this will mostly be useful for blogs and sites with multiple authors because you might want to tell more about who is writing the post.

The “About the Author” section is generally a short blurb about the author of the post that you’ll see at the end of posts of multi-author blogs. This is a way to show a little bit of the personality of the writer and connect with readers more.

Of course, I’m assuming that you either have a gravatar or know what one is.

Here’s what we’ll cover

First, I’ll show you how to put together a very basic “About the Author” section on your single posts using some of the same techniques from the first tutorial.

Then, I’ll show you some extra things you can do for personal gravatars that are unique to your site.

Writing your about section

The first thing you need to do (aside from getting a gravatar) is writing your about section.

In your WordPress dashboard, click on the link that says “Users.” You’ll see a list of all the users for your blog. You can either click “Your Profile” at the top or find a specific user from the list that you want to edit. On the next screen, scroll down the page and look for a section titled “Biographical Info.” This is where you’ll write your short blurb.

Writing your WordPress about section

Once that’s done, click “Update Profile.”

The basic “About the Author” section

Now, you need to open the file single.php in your current theme folder. All themes are a bit different, so I can’t tell you exactly where to put it, but it should be after your post content and before comments_template();

Here’s the easiest code possible you could put in that area:

<div id="author-box" class="section">
    <h3 class="section-header"><?php _e('About the author'); ?></h3>
<?php
    $author_email = get_the_author_email();
    echo get_avatar($author_email, '80', 'wavatar');
?>
    <h4><?php the_author_posts_link(); ?></h4>
    <?php the_author_description(); ?>
</div>

You can change the word “wavatar” to default, identicon, or monsterid. See the gravatar blog post to read about these options. I just like wavatars the best.

Now, if the author of the blog post has a gravatar, then their personal gravatar will appear. If not, they’ll get a funny looking character.

Special avatars for authors without gravatars

Maybe you don’t want to show any of the default gravatar icons for authors without gravatars. So, we’ll just give them personal avatars for your site.

You’d need to upload an image with the author’s user login name to a folder called “images” in your theme. For example, if you had a user with a login name of “mohawk,” you’d give him an image of mohawk.jpg. Of course, you could alter these things to suit your needs.

This only requires a couple extra lines of code and a small change:

<div id="author-box" class="section">
    <h3 class="section-header"><?php _e('About the author'); ?></h3>
<?php
    $author_email = get_the_author_email();
    $author_login = get_the_author_login();
    $avatar = get_bloginfo(stylesheet_directory) . '/images/' . $author_login . '.jpg';
    echo get_avatar($author_email, '80', $avatar);
?>
    <h4><?php the_author_posts_link(); ?></h4>
    <?php the_author_description(); ?>
</div>

If this doesn’t seem to work correctly, try using get_the_author_id(); instead of get_the_author_login();. Then, you’d need to change the names of the images to the IDs of your authors.

Giving everyone personal avatars

Let’s presuppose that you don’t want to use the Gravatar service for this at all. You might still want to add user avatars for your site and host your own images. Using the techique from the last section, placing individual images for each author in the “images” folder, here’s how you’d do that.

<div id="author-box" class="section">
    <h3 class="section-header"><?php _e('About the author'); ?></h3>
<?php
    $author_login = get_the_author_login();
    $avatar = get_bloginfo(stylesheet_directory) . '/images/' . $author_login . '.jpg';
?>
    <img src="<?php echo $avatar; ?>" alt="<?php echo $author_login; ?>" class="avatar" />
    <h4><?php the_author_posts_link(); ?></h4>
    <?php the_author_description(); ?>
</div>

Styling this thing

As with any theme, there’ll be major differences in how things are displayed. I’ve given you an ID of “author-box” to work with. Here’s how one might style it. You’ll have to adjust these values to for your theme.

#author-box {
    width: 568px;
    padding: 10px;
    background: #f7f7f7;
    border: 1px solid #eee;
    }
#author-box .avatar {
    float: left;
    width: 80px;
    height: 80px;
    }

More to come!

Now, we have two different techniques that we can use our gravatars for. Is there more we can do? Yes, there is. I’ve got at least two, possibly three, more tutorials in mind for this series.

So, stay tuned. There’s more to come.

If you need help with this and need to post large blocks of code, try to use the forums as it’s much easier to post and read code there.