Gravatars

gravatarAmong the great new features introduced in WordPress 2.5 is the built-in support for Gravatars, or Globally Recognized Avatars. Global because once you sign up for a free account your email address is associated with the image you chose and will be automatically displayed on any web page that supports the feature. To enable this feature in WP 2.5 click on Settings > Discussion then scroll down to Avatars. The rest is self-explanatory I think.

Of course this being something new to WordPress 2.5 your theme may or may not support the function. If you're using an older theme then it probably doesn't. But don't fret because it's easy to implement without the use of plugins.

The function that displays Gravatars is get_avatar() and there are a number of parameters that can be used with it. Here is an example from the Codex,

<?php echo get_avatar( $id_or_email, $size = '96', $default = '<path_to_url>' ); ?>

The parameters used above are:

  • id_or_email (required): Author’s User ID (an integer or string), an E-mail Address (a string) or the comment object from the comment loop
  • size (optional): Avatar display size (max is 512)
  • default (optional): Absolute location of the default avatar to use (used when the person has no email address associated with them)

In my case I chose to use the email address option. Using this theme's comments.php as an example, I placed the call alongside the comment author's name and assigned it its own span class. This is what it looks like,

<div class="author_meta">
<p class="author_meta"><span class="user"><?php comment_author_link() ?></span><span class="comment_edit"><?php edit_comment_link('Edit','(',')'); ?></span><span class="gravatar"><?php echo get_avatar( get_comment_author_email(), '50' ) ?></span></p>
</div>

Then I styled it in style.css as such,

.author_meta span.gravatar {float:right;border:2px double #bbb;display:block;margin:-20px 10px 5px 0;}

That's it. Of course you will probably have to experiment with the placement of the function in your own theme and its styling but it's really not that hard. It took me all of 10 minutes to get it up and running. If you're not comfortable with doing this manually there are a number of plugins you can choose from including the official Gravatar.com Plugin.

Further reading:

http://codex.wordpress.org/Using_Gravatars

Update: A new post has been released with easier instructions. Please see Gravatars: Revisted

post
About Len Kutchma

Len has been blogging for over 10 years and is a rabid WordPress fan. In addition to blogging here you can find him writing the occasional article and toiling away in the forums at WeblogToolsCollection.com. He also hangs out at the WordPress support forums lending a hand where he can. Be sure to follow @wpcanada on Twitter.

Comments

  1. Ismail says:

    Len, I came accross with Pavatar, similarly to Gravatar. Check that out.

  2. Len Kutchma says:

    I use Gravatar only because it is owned by WordPress but I'll check out Pavatar. Thanks for the tip.

  3. Thanks for the info.

    Im using Grid Focus, so I'm gonna try your code and see how it all turns out. Im a big fan a Gravatars...Never heard of Pavatars until now, though...

  4. Len Kutchma says:

    Hi Andrew,

    Actually I have since updated this post which describes the process in a manner which I hope makes it easier to understand. The CSS I use also makes the end result look nicer. Please see Gravatars: Revisted.

Please Note: WPCanada is a moderated community. Please read the Comment Policy.

What Do You Think?

*