Gravatars and Wordpress – Extended

Published by: Christopher Hennis
October 7, 2008

What is a Gravatar?

A gravatar, or globally recognized avatar, is quite simply an avatar image that follows you from weblog to weblog appearing beside your name when you comment on gravatar enabled sites. Avatars help identify your posts on web forums, so why not on weblogs?

Taken from: http://en.gravatar.com/

Let’s examine the code below in order to get an idea of the fundamentals..

Below we have an example of a CSS division that floats our gravatar to the left of the post tags, adds a little cushion inbetween the gravatar and anything to the right of it, and brings the division 5pixels away from the content above it. I would suggest you change this from inline CSS to a division class.
Next, we have a PHP function that grabs information about our gravatar from the gravatar.com servers.
$comment is the variable that holds our MD5hash / email address. This is configured by gravatar.com, so we can move on.
$size is the variable that holds the size we want our gravatar displayed. I have 35 entered below; This simply means 35pixels in width by 35 pixels in height, despite the actual size of the gravatar image.

1
2
3

<div style="float:left; padding-right:10px; margin-top:5px">
<?php echo get_avatar( $comment, $size='35' ); ?>
</div>

You’ll notice we have two additional variables in this next piece of code, and also a bit of a sliced up URL.

$default is the variable that holds our default gravatar image location.
$urlHome simply holds our base website URL. For instance, if I were to echo this variable on JungleJar.com, it would return: http://www.junglejar.com
You’ll want to change everything after /themes/ in the code below in order for this file to work with your Wordpress installation. Just change /felix/ to your theme name and the bit after that should just correspond with where you have uploaded a default gravatar image to be used.

<div style="float:left; padding-right:10px; margin-top:5px">
<?php
    $urlHome = get_option('home');
    echo get_avatar( $comment, $size='35', $default = $urlHome . '/wp-content/themes/felix/ico/grav.png' ); ?>
</div>