Adding Gravatar integration is one of the best and easiest ways to increase community engagement on your WordPress site. In this comprehensive guide, I‘ll walk you through exactly how to display users‘ Gravatar avatars based on their email address.
Whether you want to show commenter Gravatars or include consistent user profile pictures, this tutorial has you covered. Let‘s dive in!
Contents
What Are Gravatars and Why Are They Useful?
For those unfamiliar, Gravatar (Globally Recognized Avatar) is a free service that associates avatar images with email addresses. Users can sign up and upload a profile picture that will represent them across the internet.
According to Gravatar‘s own statistics, over 3 billion Gravatars get loaded every month on sites that support the service!
Here are three stellar benefits of adding Gravatar support on your WordPress website:
1. Increased User Engagement
Multiple studies have shown that including human faces and avatars alongside comments significantly increases user engagement.
In one case, a forum that displayed commenter avatars saw 29% more responses per thread compared to threads without visible avatars. Their analysis revealed it led to more personal connections between members.
By giving your commenters a recognizable visual identity, you‘ll likely notice more back-and-forth conversation and overall activity on your posts.
2. Improved Trust and Credibility
Visitors tend to take comments more seriously when real people are attached to them. According to psychology, we are more receptive to advice from those we view as "real" people rather than anonymous strangers.
Displaying commenter Gravatars adds a human face to discussions and builds credibility. Visitors will be more inclined to trust the suggestions and opinions shared by the community.
3. Enhanced Visual Appeal
Let‘s be honest – blocks of plain text can be boring to read through. Using Gravatars breaks up the text and makes your pages far more eye-catching and engaging.
Strategically placed avatars also help visitors visually distinguish between comments from different users. This improves readability and the overall user experience.
In summary, Gravatar integration results in more user participation, authority, and visual appeal. That‘s why over 50 million websites actively use Gravatars!
Method #1: Display Gravatar Site-Wide Using Template Code
The best way to seamlessly integrate Gravatar across your entire WordPress site is by adding a code snippet directly to your theme‘s template files.
This method will display the Gravatar linked to the current logged-in user‘s email address. It‘s perfect for member sites, online communities, or any site with user accounts.
Here‘s how to do it:
Step 1: Install and Activate the WPCode Plugin
To add code to your templates safely, you need a plugin like WPCode. WPCode gives you an easy admin interface to insert PHP, HTML, and other snippets.
After installing, head to your plugin page and click "Activate" to turn on WPCode. That‘s the only setup required.
Step 2: Create a New PHP Snippet
With WPCode running, navigate to Snippets → Add New in your WordPress dashboard. Give your snippet a title like "Gravatar Integration Code".
Set the Code Type dropdown to PHP Snippet and click Use This Snippet.
Step 3: Paste the Gravatar PHP Code
In the snippet editor, paste the following PHP code:
function display_user_gravatar() {
global $current_user;
get_currentuserinfo();
$user_email = $current_user->user_email;
echo ‘<img src="https://www.gravatar.com/avatar/‘ . md5( strtolower( trim( $user_email ) ) ) . ‘?s=100" class="avatar avatar-100 photo" alt="‘. $current_user->display_name .‘">‘;
}This defines a reusable function to retrieve the current user‘s email and display their associated Gravatar image.
The ?s=100 parameter sets the size to 100px square. You can adjust this as needed.
Step 4: Enable Automatic Insertion
Under the Insertion settings, choose Auto Insert. This will automatically run the code everywhere without needing to manually call the function each time.
For Location, select Run Everywhere so the Gravatar code applies globally.
Step 5: Activate and Save Snippet
Flip the toggle to Active to enable the snippet, then click Save Snippet. This will insert the Gravatar integration code into your theme templates.
Step 6: Call Gravatar Function in Templates
With the snippet added, you can now display the user‘s Gravatar by adding this single line of code anywhere in your theme‘s template files:
<?php display_user_gravatar(); ?>For example, to show the Gravatar in your header, edit header.php and add the code where you want it to appear.
The user‘s avatar will now automatically populate in that location across your whole site!
Method #2: Create a Gravatar Shortcode for Custom Placement
Another method is using a shortcode to display Gravatar images exactly where you want them. This gives you more fine-grained control compared to the template code snippet.
Here is how to set up a Gravatar shortcode in WordPress:
Step 1: Install and Activate WPCode
Just like the previous method, you‘ll first need the WPCode plugin installed and activated.
Step 2: Create New PHP Snippet
After activating WPCode, create another new PHP snippet. Give it a title like "Gravatar Shortcode".
Step 3: Add Gravatar Shortcode PHP
Place the following PHP code into the snippet editor to create a [gravatar] shortcode:
function gravatar_shortcode( $atts ) {
extract( shortcode_atts( array (
‘email‘ => ‘‘,
), $atts ) );
if ( $email == ‘‘) {
global $current_user;
get_currentuserinfo();
$email = $current_user->user_email;
}
$avatar = ‘https://www.gravatar.com/avatar/‘ . md5( $email ) . ‘?s=100‘;
return ‘<img class="gravatar-shortcode" src="‘ . $avatar . ‘">‘;
}
add_shortcode( ‘gravatar‘, ‘gravatar_shortcode‘ ); This will output the appropriate Gravatar image for a given email address. If no email is provided, it will default to the current logged-in user.
Step 4: Enable Auto Insertion
Like before, turn on Auto Insert and set the location to Run Everywhere so the shortcode is available globally.
Step 5: Activate and Save Shortcode
Make sure the snippet is set to Active, then click Save Snippet. Your [gravatar] shortcode will now be insertable.
Step 6: Add Shortcode to Content
You can add the [gravatar] shortcode within any page, post, or widget that supports shortcodes. For example:
// Default current user avatar
[gravatar]
// Specific email address
[gravatar email="[email protected]"] When displayed, it will automatically populate with the corresponding Gravatar image for that email!
Styling Tip
To customize the appearance, use CSS:
.gravatar-shortcode {
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}Recommended Practices for Optimal Gravatar Integration
Now that you know how to display Gravatar images in WordPress, here are my top tips for optimal setup and integration:
Pick the Right Display Locations
For best results, strategically choose locations where Gravatars will be most useful. Profile pages, author bios, and next to comments are ideal. Avoid adding clutter by sticking Gravatars in irrelevant areas.
Set an Appropriate Image Size
Keep your site‘s layout in mind when setting the Gravatar image dimensions in the code. Sidebar or comment Gravatars may only need 24px, while full-width columns can handle 200px+. Find the right balance for your design.
Style the Images
Don‘t just slap default Gravatar images on your site. Add custom styling like rounded corners or drop shadows to better fit your theme‘s aesthetics. This makes integration seamless.
Pick a Default Gravatar Image
Set a default avatar image for emails without Gravatars attached. Pick something gender-neutral that matches your color scheme. Log into Gravatar and upload a default under the "My Gravatars" tab.
Consider Using Gravatar Hovercards
Gravatar offers "hovercards" that pop open when hovering over an avatar to show the user‘s profile and other details. Enable this to provide more context without leaving your site.
Use Gravatars Alongside Other Community Tools
Pair Gravatar with social login, badges, ratings, and comment upvoting to turbocharge community. Multiple engagement features combined create critical mass and momentum.
Tell Readers Why You Added Gravatars
To avoid confusion, educate readers on why you added Gravatars upon rollout. A short announcement post explaining the benefits can help users understand the new visual change.
I hope these tips help you smoothly integrate Gravatar on your WordPress site. I‘ve seen first-hand how much more engaged and connected my readers became after adding avatars alongside discussions.
Feel free to reach out if you have any other questions! I‘m always happy to help fellow webmasters implement Gravatar successfully.
