WordPress: Custom Gravatars With A Fallback

Using Gravatars in your blog comments is a great way to add some personality to your comments section and avoid a list of the default “mystery man” or even worse no avatars at all.

WordPress does support Gravatars and can be used within your WordPress install but from my experience you can’t beat coding it in yourself for total flexibility.

Here is a really simple snippet that will have Gravatar support in seconds with the handy option of a custom default avatar as a fall back.

Let’s see the entire snippet:

[php]
<?
$email = $comment->comment_author_email;
$default = "http://DOMAIN.COM/gravatar.jpg"; // enter a link to your default avatar
$size = 80; // size in px, this covers width and height
$grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=" . md5($email) . "&amp;default=" . urlencode($default) . "&amp;size=" . $size;
?>

<img src="<?=$grav_url ?>" height="<?=$size ?>" width="<?=$size ?>" alt="gravatar" class="gravatar" title="<?php comment_author();?>"/>[/php]

Let’s break it down:

[php]$email = $comment->comment_author_email;[/php]

This is the email address the user enters when he/she posts a comment, if the user has a Gravatar it will use the Gravatar for this email address.

[php]$default = "http://DOMAIN.COM/gravatar.jpg"; // enter a link to your default avatar[/php]

This is the location of your custom default avatar image.

[php]$size = 80; // size in px, this covers width and height[/php]

This is the size or your Gravatar/avatar in your comments section; it works as a square so in this example it would be 80px x 80px

[php]$grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=" . md5($email) . "&amp;default=" . urlencode($default) . "&amp;size=" . $size;[/php]

This is the main snippet that will fetch the users Gravatar.

[php]<img src="<?=$grav_url ?>" height="<?=$size ?>" width="<?=$size ?>" alt="gravatar" class="gravatar" title="<?php comment_author();?>"/>[/php]

Finally this is the HTML part of the process, this places your Gravatar in your comments section and you can style in your CSS it as it has a class (.gravatar)

I would recommend using this in the “comments.php” page, somewhere around “< ? php wp_list_comments(); ? >” or whatever similar you may have in your theme!

5 Comments

  1. This looks good Paul, and here are a couple suggestions to make it even better:

    1. Use the preferred URL structure of http://www.gravatar.com/avatar/HASH (instead of /avatar.php?gravatar_id=)

    2. Don’t forget to lowercase the email before md5()ing it: md5(strtolower($email))

    Cheers!

  2. “you can’t beat coding it in yourself for total flexibility”

    From my experience, it’s better to not fight core. There’s an easy way to do everything you want to do here, without rolling your own implementation. Chip Bennett has posted a follow-up to this that explains how to leverage existing filters and arguments.

    • I suppose its how comfortable you are with it, I do alot of custom projects and use WordPress in many different ways so core coding is something I’m comfortable with :)

  3. Gravatars definitely add personality. I’m still trying to decide if I want to add it to my blog or not.

Leave a Reply

Your email address will not be published. Required fields are marked *