Set your own Custom Comment Gravatar in WordPress
Why use Gravatars?
Providing your users with avatars has become a convention in web-publishing. Enabling Gravatars on your WordPress site simplifies the process for everyone involved. While it is possible to use a WordPress Plugin to manage user avatars on your WordPress-run site, using Gravatars on your site makes less work for both you and your site’s users.Set your own Custom Comment Gravatar in WordPress (How to explanation below)
Benefits for Administrators
- You can add user Gravatars with very little effort
- You don’t need to maintain an additional Plugin
- You don’t have to manage user accounts, or their images, for commenters to use Gravatars on your site
Benefits for Users
- You don’t need to register for every site you visit just to use a Gravatar
- You can update the Gravatar you use across multiple sites by uploading a single image in a single place
Using Gravatars on your Site
To start using Gravatars on your site:
- Log in as an administrator to your site
- Navigate to Settings > Discussion and scroll down to the “Avatar” Section
- The “Avatar” section presents you with several options:
- Avatar Display: Toggle Gravatars on and off for your site.
- Maximum Rating: When users create a profile on Gravatar, they are given the opportunity to rate their Gravatar image as G, PG, R, X based on its appropriateness. Select the radio button for the maximum rating you would like displayed on your site.
- Default Avatar: WordPress allows for you to select what image you would like to display when a commenter does not have a Gravatar account. Selecting one of the “generated” icons gives you and your users some of the benefits of a Gravatar without requiring them to have a Gravatar account. The icons that say “generated” next to them take the email of the commenter and link it to an auto-generated image. Now, every time that commenter posts to your site, they will have the same unique image next to their name.
When you retrieve the comments on a post or page using wp_list_comments, WordPress will automatically retrieve your users’ Gravatars. If you would like to retrieve a user’s Gravatar without retrieving comments, you can use get_avatar.
Customizing how Gravatars are displayed
Using wp_list_comments allows you to customize how WordPress outputs your comments in your theme. It also controls the size of the Gravatar attached to the comments. By default, Gravatars are displayed at 32px x 32px. To change the size of the Gravatar, you can use the ‘avatar_size’ argument with wp_list_comments.
For example, to return a 50px x 50px Gravatar, you would call wp_list_comments like this:
get_avatar works slightly different. The first argument you pass it must be a user’s ID, email address or the comment object. You can then specify the size of the returned Gravatar, the URL for the default image you want to display if a user does not have a Gravatar, and the alternate text for the Gravatar image.
This will return a 50px x 50px Gravatar:
Customizing Gravatars with CSS
Because you can retrieve Gravatars with or without comments, you need to be specific with your CSS classes when styling Gravatars. When WordPress returns Gravatars, it assigns them the .avatar class. However, you don’t want to only target the class .avatar because it is generated in different contexts. For example, when you hover over the Gravatar in the WordPress admin bar, the Gravatar that appears has the .avatar class. If you were to change the CSS for the .avatar class, you would alter the style of both the Gravatar in your theme’s comments and admin bar.
As the Twenty Eleven theme demonstrates, you can simply use an additional class to target a specific instance of a Gravatar.
This will change the display of Gravatars only in the Twenty Eleven theme’s comments:
Create a Custom Default Avatar
If you don’t want to use any of the default images for users not registered with Gravatar, you can easily add your own by adding a filter to the avatar_defaults hook.
After uploading the new image to your theme files, add this to your theme’s functions.php file:
Now, go to Settings > Discussion and select your new avatar from the list.
From now on, all your users that don’t use Gravatar will have this avatar next to their comments.