WordPress How To: Bringing the Gravatar into WordPress

Gravatar Homepage

One great way to interact with blog readers and commenters on a more personal level is to implement the use of Gravatars in site comments. These user pictures are tied directly to a person’s email address, meaning they can be used across a wide variety of sites that plug into the Gravatar API. Though the company behind Gravatar was once an independent entity, it was eventually purchased by WordPress in 2007 and now serves 20 billion images a day to WordPress blogs and others around the internet.

Because it was purchased by WordPress, some methods of gravatar integration using the world’s most popular content management platform are as easy as updating some settings in the WordPress Dashboard. Other implementations make use of plugins in order to place gravatar pictures throughout other sections of WordPress templates and designs.

Enabling Gravatars and Other User Pictures via the Dashboard

Gravatar Homepage Since its purchase of Gravatar five years ago, WordPress has tightly integrated these user pictures into its administrative interface. In fact, in the most recent versions of the WordPress software, it is the only option for displaying a user picture next a comment they’ve made on a blog entry.

To enable Gravatar support in WordPress comments, a few simple steps must be followed using the WordPress dashboard. Once logged into the software, click the “Settings” heading in the WordPress Dashboard software. When this category has been expanded click on “Discussion” and the administration panel for user comments will open.

This page contains several settings, ranging from required comment information to the way WordPress links to sites which mention your blog entries. The last set of settings is dedicated to Gravatars, though it is only labeled as “Avatars” for users of WordPress 3.0 or higher.

This group of settings allows WordPress blog owners to display which avatars are paired with comments, which ones are censored, and what should be done if a commenter has not signed up for the Gravatar service and defined a picture for themselves. Below are a list of settings and how to properly fill them out to enhance the appearance of comments and the personality of those making them.

Avatar Display

This is a relative straightforward option. Those WordPress users who want to display Gravatars in comments will choose “Show Avatars.” Those who don’t will select the other option.

Maximum Rating

Gravatar allows their users to self-rate the photos they have uploaded for use as their global avatars on WordPress blogs and other websites. These ratings generally follow those that are assigned to movies, with a “G” rating being the lowest and an “X” rating indicating adult content which is inappropriate for some internet users.

This is an important setting to pay attention to when enabling Gravatars. It’s important to note that there is no real limit on what a user can upload as their avatar. While most companies ban explicit images, the Gravatar rating system as allowed the company to permit those images, leaving display of them up to individual website owners. Operators of family-oriented websites, or simply those who wish not to offend the majority of their readers, should pick a Gravatar rating which will keep explicit material off their website and out of their comments. Generally, this would mean restricting display of user pictures to those rate PG-13, R, or G.

Default Avatar

Even though the Gravatar service serves up 20 billion images a day to blogs around the world, there are still a vast number of people who do not have a Gravatar assigned to their email address. Comments by these authors can be handled in a number of ways.

First and foremost, WordPress offers some static image options that will display the same default image every time a Gravatar-less user comments on a blog post. These can include a blank white image, a “Mystery Man” image that shows the outline of a geometric person, or the standard Gravatar logo. Because these are static images, they will appear the same way every time a user comments without a Gravatar. That’s fine for some sites, but still others prefer something that changes based on a per-user basis and helps to identify the commenter.

For those WordPress users, the Dashboard offers a number of dynamically generated images for display in situations where a commented lacks a Gravatar. These images are generated on the fly using a commenter’s name, website, and email address information. They will be consistent every time the same user (with the same email address) leaves a comment, making them a sort of Gravatar alternative.

The WordPress Dashboard allows for several types of dynamically generated comment avatar images:

  • Identicon, a geometric pattern based on a user’s information
  • Wavatar, which creates a unique smiley face based on this information
  • MonsterID, a dynamically generated image that looks a bit monstrous in comments
  • Retro, which uses block shapes to create face-like images based on user data

After Gravatars have been enabled, rating limits have been set, and a default image type has been chosen for commenters who lack a Gravatar, it’s time to save these preference in the Dashboard and focus on customizing the comments template to display these new, personal images.

Bringing the Gravatar to WordPress Comment Templates

For the default themes included with every download of the WordPress software, Gravatar images are automatically included in the comments template and will automatically show up once a user has enabled them in the “Discussion” settings panel. For custom-designed themes, or downloaded themes that have left this code out of the comments template, inclusion of the Gravatar images is relatively simply

To bring the Gravatar image into comments, a simple PHP include must be added to the “comments.php” template located within the selected theme’s home directory of template files. The code looks like this:

< ?php echo get_avatar( $id_or_email, $size = ‘PIXEL-SIZE’, $default = ‘DEFAULT-IMAGE’ ); ? >

There are several parameters to know when adding this code to the comments template in order to customize the display of the Gravatar. These are as follows:

$id_or_email This variable cannot be removed or customized, as it pulls the commenter’s email address from the comment form and turns that into their Gravatar URL. Every Gravatar is constructed using the same basic code, and leaving this out will cause the default image to be displayed next to every commenter’s name, regardless of their status as Gravatar user or non-user.

$size This is set in pixels, and determines the size of the square Gravatar image generated by the code. If the image is to be 50 pixels square, the variable would be constructed as follows: $size = ’50’, this will also be added into the Gravatar URL, and the server will only send an image to the WordPress blog that is the size they’ve demanded via this PHP include.

$default Even though WordPress allows users to specify a default image for non-Gravatar commenters, this setting can be overridden via the PHP include tag used to display the images in comments. That’s because the default URL construction of a Gravatar image actually allows for a customized default image as part of its parameters. This variable can be set to a default image custom-designed by the site owner, overriding the “Mystery Man” or Gravatar logo. It’s great for making a site’s design and images consistent.

For WordPress users who prefer one of the standard dynamic or static images, no default image needs to be specified in the PHP tag. The entire “$default” construction can be deleted entirely, and this will cause WordPress to display the default image that was defined by the site owner in the Dashboard during the setup process.

Using CSS to Style the Gravatar Image Output

WordPress generates Gravatars will relatively predictable CSS “class” code that allows users to easily style the images produced on the fly. When using the standard PHP tag inclusion method to display Gravatars, the resulting “img” tag contains the following code:

class=’avatar avatar-SIZE’

In the example above, the Gravatar was told to be 50 pixels square, meaning the code would be printed on the comments page as “avatar avatar-50.” WordPress template designers can then easily include the CSS styling code in the theme’s “style.css” stylesheet file, and save the changes to the server. The image will be immediately rendered using the new CSS code and the Gravatar will be seamlessly integrated with WordPress comments.

Using Plugins to Insert the Gravatar Throughout a WordPress Theme

The great thing about WordPress is that the software’s features are not limited by what Automattic includes in the standard Dashboard. Indeed, WordPress has the largest community of plugin developers, and downloadable plugins, of any content management system in the world That bodes well for a number of functions, but especially for the inclusion of gravatars in other site elements.

Using the plugin community, there are some great ways to increase the visibility of this small identifying image, as well as encourage users to get their own so that a “default” image is no longer necessary. Here are some of the best ways to integrate Gravtars into a theme using plugins.

Recent Comments This plugin, which has been around since long before Gravatars were a standard option in the WordPress Dashboard, displays al its of recent comments in the sidebar of a WordPress site. Every comment is paired with the author’s Gravatar, meaning that even non-commenting users will see this image and want to get one of their own. The image is styled within the WordPress Plugins and Widgets administration panel, and can be optionally turned off if users wish.

Gravatar Signup Encouragement No one likes seeing that default image for users who haven’t yet joined the Gravatar service, and so this plugin seeks to remedy that by encouraging users to take the next step. When a user posts a comment and is not part of the Gravatar service, this plugin displays a short message encouraging them to visit the website an create an account. It even includes an off-site signup form, pre-filled with the offending user’s email address. This is a great way to encourage more user interaction and personality on a WordPress blog that has recently adopted the Gravatar standard.

Extended Gravatar This plugin turns a Gravatar into a Facebook-like popup that displays a larger version of the user-selected image, along with their name and contact details that they have made public to other commenters. It’s a great way to enable greater user interaction and foster more discussion using something as simply as a user image.

Adding User Pictures to Comments Encourages Commenting

Integrating the Gravatar image into WordPress comments isn’t just a fun way to see user pictures and enhance the appearance of comments. It actually encourages greater user interaction with a site, as the appearance of pictures turns commenters from mere blocks of text into real, relatable people who all enjoy the same type of dynamic blog content. Users will enjoy being able to customize this image and control the way they appear to others on your blog and others.

As commenters become more involved, and commenting becomes more common, a blog’s reach and relevance will increase. This has the added effect of increasing search engine rankings and a site’s perceived authority. All because of a simple, user-defined image that can be enabled in the WordPress Dashboard.

Things to Keep in Mind

Gravatar Images

While the community-bulding benefits of a Gravatar are important (so important that WordPress bought the company which developed it), even more important is ensuring that users are safe from explicit images and aren’t driven away out of pure offense. Remember to always set the “maximum rating” and default avatar options with care, as these can be the equivalent of an unexpected expletive during prime time television for some more sensitive readers and younger commenters.

Other than that, enjoy your new Gravatar and have fun with the site’s universal appeal and comment-encouraging presence! For those just getting started with WordPress, our series of WP how-to guide is a good place to start.