WordPress: Custom Gravatars With A Fallback

Posted by Paul Maloney in Tutorials, Wordpress on September 23rd, 2010 with 12 Comments

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:

<?
$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();?>"/>

Let’s break it down:

$email = $comment->comment_author_email;

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.

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

This is the location of your custom default avatar image.

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

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

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

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

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

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!

Short url: WordPress: Custom Gravatars With A Fallback - http://bit.ly/JJX1Wh

Posted in Tutorials, Wordpress using the Tags: gravatar, tutorials, Wordpress

Paul Maloney is a UK based web designer/developer and runs the design agency Tropica (Tropica Web). He particularly enjoys using and working with WordPress and has a keen interest in typography. You can follow Paul on Twitter (@mcbonio).

See all posts by Paul Maloney

Network Posts

You can leave a response, or trackback from your own site,

12 Responses to “WordPress: Custom Gravatars With A Fallback”

Beau Lebens says:

2010/09/24 at 4:18 am

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!

Reply
- Paul Maloney says:
  
  2010/09/24 at 9:32 am
  
  cheers Beau!
  
  Good shouts on point 1 & 2!!
  
  Reply
Andrew Nacin says:

2010/09/25 at 6:12 pm

“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.

Reply
- Paul Maloney says:
  
  2010/09/29 at 2:53 pm
  
  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 :)
  
  Reply
Brett Widmann says:

2011/01/16 at 6:59 pm

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

Reply

Trackbacks

All content, such as illustrations, photos, resources and tutorials are copyright to their respective owners.

nenuno creative is a trademark of nenuno design & development network and any content or resources originally created by nenuno can't be used without permission.

MENU

POPULAR POSTS

FRIENDS