How-to: Put Gravatar on a WordPress site

Last week, I had a post published on the Aussie Bloggers blog about how to get your own Gravatar set up. This is the natural extension of that – making your blog Gravatar-friendly. This guide is for WordPress blogs, but there will be some information available at the end of the post about other platforms. First off, an important question is if you’re already using gravatar and might not know it, because you’re using a Gravatar-ready theme.

Gravatar-ready themes

There are a few themes out there which are already set up for Gravatar – including one of the more common themes that I see on a daily basis – Freedom Green & Widgetized. It’s the theme in use on the Aussie Bloggers blog, on Snoskred’s, Lightening’s, and quite a few other blogs. Any site that is running this theme really doesn’t need to read further. Of course, I’d like it if you did anyway. πŸ˜‰

Gravatar plugin

If you’re not running one of those themes, you’ll need to do one of two things – hack your own theme’s code to match the code that you can find in the Gravatar-ready themes, or you can make it easy for yourself and download the Gravatar plugin. You will still have to fiddle with your site’s code, but going this way, it’s only a matter of adding a simple bit of code into your comments file.

Gravatar says on its site that the plugin is only for WordPress 1.2, however, I have tried this on a blog that is on version 2.3.2, and I know that it works up to and including the latest editions of WordPress with no problems.

Installing the plugin is no different to installing any other plugin. Simply download the zip file, expand it to your system, and then upload it to your blog. Then, in the Plugins page, activate it. Now, what you need to do is find the file that controls your comments.

Generally, that will be found in your Theme’s directory – and is normally called comments.php. If you have the permissions set where you can edit files while they’re on the server, then you can edit it using the Theme editor, which can be found in Presentation -> Theme Editor. When there, click on Comments, and you can edit the file.

A word of advice

Before getting into showing you how to put the Gravatar into your comments, I want to give you some important advice about styling. As you will see in my example here, I haven’t done any styling to the image. I’m just putting it in there as a proof-of-concept that it works. You will have to take some time to play around with the CSS to get it where you want it. If you would like some assistance with that, feel free to contact me, and we can work something out.

Also, I am doing this on my personal testing bed (which has a very stylish black theme which I modified; I gotta say that I’m a bit chuffed about it, but I digress), and you should do the same thing; with the same theme that you are using on your blog, so that it is simply a matter of copy the code that you’ve come up with and paste it into the same files on your current theme. I’m a firm believer that end users probably shouldn’t be the ones checking out live testing of something. πŸ˜‰

With that out of the way, let’s go back to the show. πŸ™‚

So, in the comments.php file – either in your offline editor, or in the built-in editor in WordPress, you will want to look for a section that looks like this in the file –

Code in comments.php to look for

If you don’t find something exactly like that, searching for “comment_text()” should come back with what you are looking for in the file.

Now, again, this is why it’s just a proof-of-concept showing you how to put it in there, I’m going to put the Gravatar code into the comments.php file just before the comment text. An important thing is that you need to put in image tags around the Gravatar code. Otherwise, you’ll see the address that your blog is looking for to load the image.

The code that you will need to put in is this – <img src="<?php gravatar(); ?>" alt="Gravatar" />

There are variations to the code that you can make to restrict the types of Gravatars that appear – you might want to restrict by Rating (G, PG, R, X). You might also want to set the size of the Gravatar that shows by putting in a number. It will then show the images in that size, up to 80×80 which is the maximum for a Gravatar. A special function that you can control is what shows when the user doesn’t have a Gravatar by telling it what address to cull the image from to put in its place. Lastly, you can put in a border if you want by declaring the Hex code for the border you want.

In my example, I’m going to use just change the image size to half-width, so the code will look like this –<img src="<?php gravatar("" ,40) ?>" alt="Gravatar" />

This is what the code looks like in situ in the rest of the file –

Code after inserting Gravatar

And, then, this is the output of the code as I have it:

Gravatar in use on site.

Other blog platforms

If you aren’t using self-hosted WordPress, then your success at using Gravatar will vary. On the Implement page, they are open about what blogging platforms it will work with – TextPattern (using a hack), MovableType, WordPress, Expression Engine, PMachine, Nucleus, YACS, Blojsom, and instructions for PHP, PERL, ColdFusion and Java. However, two services that it doesn’t work with are Blogger and LiveJournal.

If you use Blogger, there are third-party services that you can use, but those services only mean that you and your readers are dependent upon another party getting everything together every day to serve up your comments. While Blogger’s commenting system is quite flawed, it is my personal opinion that you are better off just going with Blogger’s default and waiting for them to hopefully get something going where you can have the option of using Gravatar.

If you have questions

If you have any questions about implementing Gravatar on your WordPress blog, feel free to leave a comment here or drop me a line via the Contact page. I’m almost always willing to help out to get something sorted out, and if you’re looking for some design consultation, I’m willing to help out in that field as well. πŸ™‚

Also, if there is a topic that you’re wanting me to cover in a future how-to, again, just drop me a line via the contact page. πŸ™‚

3 thoughts on “How-to: Put Gravatar on a WordPress site

Comments are closed.