I’m tinkering the whole morning with a WordPress theme and I’m trying to customize it. I made also a separate subdomain in order to play, edit and test themes and WordPress hacks. So, unfortunately this WordPress theme had not Gravatar support out-of-the-box. Therefore, I searched and found a very simple way to implement Gravatar to your WordPress comments.

In fact, it’s piece of cake. You don’t have to know anything about PHP or CSS.

Step 1: your Comments loop

Every WordPress theme supports comments. That equals to a comments.php file in your theme directory. Open it and find the the foreach and endforeach loop (it might look something like this:

<?php foreach ($comments as $comment) : ?> and <?php endforeach; /* end for each comment */ ?>.)

Now, place this code everywhere inside this loop:

<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '50'); } ?>

The “50” string or whatever in this code is your Gravatar’s photo size. You can edit it so it suits your theme’s design or your own likes.

Step 2: Style the Gravatar

By now, Gravatars won’t be styled (left, right, padding, etc). We will do it with a simple CSS code snippet. You probably have noticed that the Gravatar code spits out the “avatar” class on each image. Why not tell now the CSS to float the image left and add a small right margin. Open your style.css file of your WordPress theme and add this line of code:

img.avatar {float:left; margin-right:5px;}

This is it!

There you go! Simple and efficient Gravatar implementation to your WordPress comments. Of course themes will differ, you can style them however you like using CSS. (Hint: this code will only work on WordPress 2.5 and above; but I assume everyone now uses at least 2.9.2 so it won’t be a problem.)

More info about Using Gravatars at the WordPress Codex.

Having problems? Do you want to suggest a different workaround? Feel free to comment.