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:
- My avatar: My personal avatar I can change from my site.
- Gravatars: User gravatars if a user has one set up.
- Wavatars / Indenticons / MonsterIDs: A gravatar that is used if a commenter doesn’t have a gravatar.
- 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.
I am happy to see Gravatars becoming common. They usually add a lot to posts in my opinion, a greater sense of style and community. Looking forward to sprucing my up. Thanks.
I thought at first those were WAVATARS plugin, the avatar icons looks similar.
David
Me too. It just adds a little extra to boring comments sections. It’s nice to see who’s behind the comments or at least how they represent themselves online.
A good gravatar can also bring you traffic. If I see an interesting gravatar in someone’s comment section, I almost always click on their link to see who that creative person is.
K
It is the Wavatars plugin. It’s now in the core gravatar code. They mention it on the gravatar post I linked to. You can also use Identicons and MonsterIDs, but I prefer Wavatars.
It’ll be interesting to see if new gravatar sets comes out. If I had the time and the creative energy, I’d do a series of different sets. These can be anything. It’d be cool, for example for a MLB blog, to have a default set of MLB avatars for users that don’t have a gravatar.
I love Gravatars. Thanks for the info!
Thanx Justin, your idea thought many more techniques related to how to modify comments and gravatars.
I thought there is no possible way to create a special avatar for the trackbacks and pingbacks… Loll…
Please write me and tell me more about home gravatars, Daddy
Justin, do you know if there’s a different function to query gravatar.com to see if the email address has an associated gravatar? I’d probably end up checking that boolean and then just using a single 80×80 image for all non-gravatar people – to me this would improve page response – for instance, I have one article that has 400+ comments and loading/generating all those avatars could take a while.
Also, what happens if gravatar.com is temporarily down? Does the page just hang?
One way that I’m modifying your code is to link up every gravatar – if the commenter didn’t submit a url, then I make its url gravatar.com – I figure if this would be the best practice as it would provide each curious clicker the chance to get their own gravatar which would in time lead to more commenters having personalized gravatars
Gravatar,wavatar..
It’s really nice For Comments Field…
Mandy
No problem.
J Mehmett
There’s still a lot more we can do with them. If you really wanted to, you could create a default avatar set specific to your blog.
Dad
If only you knew what a gravatar was. I emailed you.
Catsandbeer
I don’t think there’s a different function. For a post with 400+ comments, I think we should just turn gravatars off. I’ve got one post with 600+ that I need to do this for. After I try it out, I might write a post on it.
Gravatar.com going down should be a rarity, but it can happen. I’m not exactly sure what will happen though. The page might “hang” for a bit though, at least until it decides it can’t load the images.
Adding the link back to gravatar.com for users without URLs might be a good idea. You could also add a default image that says, “No Gravatar? Click Here.”
Hans Hilmi
Yes, it adds a bit of personality.
Good post! I made a gravatar after reading this. Thanks!
Jonah
Thanks. There’s a lot we can do with these things. I’ll continue the series and show some more neat things that are possible.
Right over my head. My comments section looks nothing like what you have written above, I used a single line of code I found in a forum post to turn them on but have no clue what I need to change to get the above working.
Here’s the code……
doh! What Just happened?
“What just happened?” Well, you tried to post code in the contact form, and it really doesn’t work well with WordPress without wrapping it in pre or code tags.
Stop by the support forums for posting code and getting support with this.
Fine job there. I want to learn how to design wordpress themes. Can I get a complete tutorial out there.
hi justing
trying to add gravatars to my index page http://redseasound.com/demo in a ‘simple’
way but cant get the url to work
<a href=”” />any ideas?
damn always i forget about code last time it was backticks and i put forward ticks now what have i done wrong?
Justin, is that compatible with WordPress 2.7 comments?
Kate Mag — Nope, WordPress 2.7 changed a ton of things with comments. Whenever I find the time, I’ll update this a bit more with the relevant information.
lets see if i can pull this off on my blog …
very informative article …
thanks for sharing …
Gravatars add a bit of color to a non-sofisticate blog.
Thanks for this guide, let’s read part 2 now
how to display gravatar for author inside every post?
hi Justin,
is there any methods to use my own avatar gallery that displayed in comments? just like the monster face picture.