Using Gravatars in WordPress themes

Gravatars, or Globally Recognised Avatars, have been around for a while now and their popularity has been given a further boost for WordPress users with the arrival of built-in Gravatar support in WordPress 2.5. The most common place where people are likely to want to show Gravatars is in the Comments. However, themes that pre-date WP 2.5 probably lack the necessary code to display them. Luckily, WordPress gives us a very easy way to add gravatars to theme template files. This article show you how to add Gravatars to your Comments.

Get yourself a Gravatar!

If you haven’t done so already, go to www.gravatar.com and sign up for a Gravatar account. It’s free and quick to do, and once you’ve uploaded the image that you will use for your Gravatar, you’re good to go.

Note that your Gravatar is associated with your sign-up email address. If, like me, you are someone who uses several email addresses for registering and /or commenting on different sites, the good news is that you can add other email addresses to your Gravatar account and assign images, or not, as you wish.

To display your Admin’s Gravatar make sure that the email address associated with the Admin User Profile in WordPress is registered in your Gravatar account.

The get_avatar() function

To access the Gravatars in WordPress we simply need to use this function in the appropriate place in our theme files:

get_avatar( $id_or_email, $size = '96', $default = '' );

As you can see, the function takes three parameters:

$id_or_email This identifies whose Gravatar we should display. We are going to use it in our Comments, therefore we can simply use $comment for this parameter and WordPress will automatically get the Gravatars for each comment.

$size This sets the Gravatar image size in pixels. The size is up to you, so choose a size which will fit in with your theme layout. If you don’t specify a size here, the default is 96 x 96 pixels.

$default This allows us to specify a path to a default Gravatar image in the event the commentor doesn’t have a Gravatar. Generally, we can forget about this parameter because we can define a default gravatar in our WordPress Admin (see below). However, if you want to define your own default Gravatar, you can use this parameter to indicate the URL to your default image.

Adding Gravatars to Comments

Now that we have a basic understanding of what a Gravatar is, and know the WordPress function we are going to use, it’s easy to add Gravatar support to an existing theme’s Comments. Simply follow these steps:

Enable Gravatars in our WordPress Admin

Go to WP Admin>Settings>Discussion and find the Avatars section.

Click image for larger version.

Select Show Avatars, then set up the other options as per your requirements.

Adding the get_avatar() function to comments.php

Open up your theme’s comments.php file and look for the block of code that prints out the comments. Depending on the theme, generally this will commence with either:

or:

A typical example of this section of code will look something like this:

	
	

		 on
		comment_approved == '0') : ?>
		Your comment is awaiting moderation.
		
		  

		

		
		
	

Assuming we are going to add the Gravatars alongside the comment text, we now need to find the specific code that displays the comment text:

We can now simply add the get_avatar() function to this code as shown below:

Note: we have to echo the function so that the Gravatar is output on to the screen. For this example I’ve chosen a Gravatar size of 80px.

Adding styles to the Gravatars

To get the layout of the Gravatars looking nice we will probably need to style the Gravatar image, and we’ll certainly need to clear any CSS float included in these styles. Here are a couple of options for styling the Gravatars:

1. Using the CSS stylesheet: The get_avatar() function automatically adds classes of avatar and avatar-$size to the Gravatar IMG tag.

Therefore we can simply add a class “avatar” to our stylesheet and style it as we like. In the case of default Gravatars the function automatically adds a class of avatar-default. Once again, we can simply add a class “avatar-default” to our stylesheet and style it accordingly.

2. Inline styles: Alternatively, we can simply add an inline style like this:

Note that the new line of code is wrapped in a DIV. To make sure we don’t have any problem with the float:left; style, we can add a float clearing method and the final code will look like this:

That’s it! A really easy and effective way of getting Gravatars into our Comments, thanks to a handy new WordPress function get_avatar() and a 2 minute tweak of our comments.php file.

Further ideas:

Although in this example the Gravatars were placed immediately alongside the comment text, you could opt for an alternative layout – it’s entirely up to you. The only thing you have to remember is to ensure that the get_avatar() function is inserted between the foreach… and endforeach PHP commands within your comments.php file.

If you want to see another way of using Gravatars in your theme, find out how to Create Author Pages.