Add Gravtar Support to your themes

Sun, Feb 1, 2009

Wordpress tutorials

Add Gravtar Support to your themes

After a few different people requested Gravatar support in the comments for the popular Choice WordPress theme, I decided to look into it more carefully. I came across this great post by HackWordPress which gives you a small code snippet to add Gravatars to your comments loop. Since then, I’ve been adding Gravatar support to all the themes here, just because it’s so simple to do. In this guide I’ll show you how exactly I integrate Gravatars into themes.

Before you continue, please understand this is guide is written for WordPress 2.5 and above only. The code gone over will not work in previous versions.

The Gravatar Code

Just plopping in the following code in your comments loop will work, but it probably won’t look very good as-is.
<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '50'); } ?>

Basically this code will check to see if you have the get_avatar (native to WordPress 2.5), then display the avatar of the commenter in a 50px square.

Use a Ruler

If you want to make sure your Gravatars are at a suitable size, I recommend the MeasureIt Firefox extension. This will help you measure out an area in your theme to determine a good size for Gravatars.

Where to put the code?

In the Choice theme, I found that 40 was a good size. So where did I put this code exactly?

Choice Gravatar Location

Anywhere within the foreach and endforeach (the comments loop) will work.

Styling your Gravatars

Once you have Gravatars displayed on your comments template, you’ll probably want to style them too. You’ll notice the Gravatar code spits out the “avatar” class on each image. Let’s add a line to the CSS stylesheet to float this to the left, and add a small right margin.

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

There you go, you have nice looking, perfectly sized, styled Gravatars. Of course themes will differ, you can style them however you like.

Conclusion

Remember, this code will only work on WordPress 2.5 and above. The function_exists conditional tag will cause your theme not to break, but nothing will show up in previous versions. More information on other methods of using Gravatars are detailed on the WordPress Codex.

If you just read this whole article and have no clue what a Gravatar is, I suggest you read this one first by Lorelle on WordPress. It goes over the basics of how to get your own Gravatar by signing up at Gravatar.com as well as using Gravatars on older versions of WordPress with plugins.

Not only can Gravatars be used for comments, but they can also be added to author’s individual posts as well.

Related Posts

  1. Seperate Trackback and comments
  2. Making wordpress secure
  3. Some important tips after installing wordpress
, , ,

3 Responses to “Add Gravtar Support to your themes”

  1. Ryan salvador Says:

    Hey Boss – its a nice blog, just looking around some blogs, seems a pretty nice platform you are using. I’m currently using WordPress for a few of my sites but looking to change one of them over to a platform similar to yours as a trial run. Anything in particular you would recommend me about it?

  2. Odell Pevahouse Says:

    Where can I find normal theme for WordPress? There are enough cool themes, but sometimes limited to set up. I have installed last versions of premium and free Crackatoa, Aparatus, Secret Garden 2, Convention, also I tried also BlueSense – simple, but made for AdSense. Not often we can see something simple but good in settings.

  3. Learn php Says:

    thanks bro.. you did a a great work, i was trying to learn php, but stuck on the while loop. you video is awesome.


Leave a Reply