Gravatar- The Universal Avatar

in WordPress Tutorials

Gravatar aims to provide a universally recognized avatar or personal profile that can be used with any site or social network. It allows a user to create a single profile that can be linked to any of the their online and publicly accessible content.

In my case, I write for several online publications and technical websites. I can update my Gravatar profile and it will automatically update all of my subsequent profiles without the need to edit each one individually.

Gravatar support can be included for the author’s individual blog posts and the entire comments section so that every time a new comment appears the users Gravatar account is linked.

Gravatar works fantastic with one single exception, many WordPress themes are not pre-configured for use with the service. But luckily, the aforementioned support can be added to any WordPress theme or site (version 2.5 and above).

Adding Gravatar Support To “Comments”

The required code to add Gravatar support is the following:

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

The segment above basically looks up the related users information in order to match a Gravatar profile and then displays it in a 50 pixel size square. More specifically it’s for use in the “comments” section of any blog or WordPress site.

Unfortunately just entering the code above won’t display content that looks quite as “professional” as a more polished project. But the best feature of the Gravatar code is that it can be customized and enhanced, so that the output content does in fact look professional.

The code above should be pasted into the “comments.php” source file anywhere between the comments loop section (designated by the foreach, and endforeach commands).

Adding Gravatar Support To “Author Information”

There are many sites that employ several writers at a time, and of course each writer has their own personal profile. But to make things easier, adding the proper support at the end of each post will display the author’s related Gravatar.

By default WordPress natively supports Gravatar linked profiles but the information doesn’t always display, especially in third party custom themes.

So, to add Gravatar functionality the following code must be implemented:

<?php echo get_avatar( get_the_author_email(), '50' ); ?>

The code above matches the author’s listed e-mail address to a related Gravatar account, so make sure your writers have correctly identified e-mail information in their WordPress profile (which can be edited via the sites WordPress dashboard).

This code can be implemented anywhere the active theme displays author information, there is really no explaining exactly where this code will go as it varies from theme to theme.

Customizing Gravatar Displays

The displayed Gravatar information section can be customized, but in order to do so the “style.css” source file must be edited.

Add the following line into the stylesheet:

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

The code above displays the avatar on the left side of the related table with a small margin set just on the right side, this should display the Gravatar evenly with the above post text. Users can completely alter this information by swapping out the “left” and “right” segments of the code above, also any standard “php” or “html” style code can be entered to alter text color or avatar borders.

Also, if you refer to the two segments of code which were listed above you will notice in both there is a number “50”. This number directly represents the output size of the Gravatar, so in order to change the total size users simply need to alter this number. For instance, if you wanted to display an 80 pixel total size comment Gravatar you would simply change the code to the following:

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

Notice how the number “50” has been changed to reflect the new size, which is now “80”.

Congratulations you now have more definitive Gravatar profile support in your online WordPress blog or website!

Comments (2)

  • Comment by Kevin Muldoon
    Kevin Muldoon

    @Joella Hi Joella, I’ve corrected this. The author had incorrectly put the html code instead of the tags. :)

  • Comment by Joella

    Hi, first thank you so much for this awesome article. Was exactly what I was looking for.

    I just want to take a moment to point out a little problem with the page. Your code boxes are displaying the HTML entities instead of the angle brackets. Not a big deal, but when I copy code snippets its better if I can just cut and paste.

    If it helps I’m running the latest version of Mac OS Lion and using Firefox 9.01