Justin Tadlock

I’ve been playing around quite a bit with the gravatar feature for WordPress since it now comes built in. I’ve learned a few things, so I figured I’d share them with you.

From this point forward, I will assume you know what a gravatar is. WordPress 2.5 comes with built-in gravatar support. If you’re using an earlier version of WordPress, you’ll need to modify the code in this tutorial and use the gravatar plugin.

For the first part of this series I’ll go through some techniques you could use to spruce up your comments section. Some of you may notice that there are four distinct types of avatars used in my comments section:

1. My avatar: My personal avatar I can change from my site.
2. Gravatars: User gravatars if a user has one set up.
3. Wavatars / Indenticons / MonsterIDs: A gravatar that is used if a commenter doesn’t have a gravatar.
4. Trackback / Pingback avatar: The avatar I use for trackbacks and pingbacks, which help separate them from normal comments.

Setting up our comments section

The first thing you want to do is find your normal comment section in your theme’s comments.php file, which should begin something like this:

<?php
echo '<ol class="commentlist">';

// Alternate comment classes (bg colors)
	$odd_comment = 'alt';

foreach ($comments as $comment) :

For the next section, we need to set up a few variables that we’ll use later, which are the comment author’s URL, the type of comment (comment, trackback, or pingback), and include a funny-looking default avatar, which I’ve set to “wavatar.”

According to the Gravatar blog, there are four settings you can change your default gravatar to, which are default, identicon, monsterid, and wavatar. I’ve chosen wavatars because I think they’re a bit more fun.

// Set some variables that we'll use
	$commenter_url = $comment->comment_author_url;
	$comment_type = get_comment_type();
	$avatar = 'wavatar';

Now, we need to show those comments.

// Comments
	echo "<li class='$odd_comment'>";
	// Open commenter link if it exists
		if($commenter_url == true) {
			echo '<a href="'.$commenter_url.'" rel="nofollow" title="'; comment_author(); echo '">';
		}

Here’s the part where we get a little crazy with our gravatars.

We want to set up a default avatar just for ourselves that we can change on our on site. This allows us to use our own avatar on our sites but our gravatar on other people’s sites. Assuming you don’t separate trackbacks and pingbacks from the normal flow of comments, you can also give them a special avatar to distinguish them from the crowd. If the comment is not from you, a trackback, or a pingback, then it displays normal gravatars.

You’ll need to change the email address and image paths in this part of the code to suit your needs.

	// Personal avatar
		if($comment->comment_author_email == "averagejoe@mysite.com") :
			echo "<img src='"; echo "/wp-content/uploads/avatar.jpg' alt='Your Name' class='avatar' />";
	// Trackback / pingback avatar
		elseif($comment_type == 'trackback' || $comment_type == 'pingback') :
			echo "<img src='/wp-content/uploads/trackback.jpg' alt='Trackback/Pingback' class='avatar' />";
	// Everyone else's gravatar
		elseif($comment_type == 'comment') :
			echo get_avatar($comment->comment_author_email, '80', $avatar);
		endif;

Now, we just need to close off the open link that wraps around the gravatar and show the rest of the normal comment section.

	// Close commenter link if it is open
		if($commenter_url == true) echo '</a>';

	// Meta data
		echo "\n<div class='comment-meta-data'>\n<span class='comment-author'>";
			comment_author_link();
		echo '</span> on ';
		if($comment->comment_approved == '0') :
			echo "<em>Your comment is awaiting moderation.</em>";
		endif;
		echo "<span class='time'>
			<a href='#comment-"; comment_ID(); echo "' title=''>"; comment_date('M jS, Y'); echo "</a>";
			echo " at "; comment_time();
		echo "</span>"; edit_comment_link('Edit',' <span class="edit">','</span> ');
		echo "\n</div>";
	// Comment text
		echo "\n<div class='comment-text'>\n";
			comment_text();
		echo "\n</div>\n";
	echo "</li>\n";

// Change comment class
	if('alt' == $odd_comment) $odd_comment = 'odd';
	else $odd_comment = 'alt';

// End comment list
endforeach;
echo "</ol>\n";
?>

Styling your comments section

I can’t write a one-size-fits all tutorial on this because everyone’s comment sections are styled differently. This should get you started though. Gravatars are given a class of avatar.

#comments-template .avatar {
	float: left;
	width: 40px;
	height: 40px;
	margin: 0 15px 10px 10px;
	padding: 2px;
	background: #fff;
	border: 1px solid #ccc;
	}

If you noticed above that I set the default avatar to 80px in the earlier code, that’s so that I have a lot of styling options left open later with CSS. You can change the width and height from your stylesheet, which makes much more sense.

Do more with this

On my blog, I’m also using author comment highlighting, which is bit beyond the scope of this tutorial, but you can do the same. You can also separate trackbacks and pingbacks entirely or some other crazy thing that we don’t know about yet.

The whole point is to have fun with gravatars. Let your readers show off a bit of themselves on your blog. Get to know them a little better.

The code above is modified version of what I’m using on this blog, so if there are any typos, feel free to let me know. I’ll update them ASAP.

Stay tuned for the rest of this tutorial series. We’re not going to stop at the comments section.

If you need help setting this up please stop by the forums here at my site. It is much easier to post and read code there than in the comments section of the blog.