Customizing your Gravatar on WordPress

WordPress

A Gravatar is, in WordPress talk, a user avatar.  Unlike other avatars however, these are Globally Recognized Avatars.  Whenever the user logs in to one WordPress site, their Gravatar will actually continue to follow them to any other WordPress site they visit.  There is no need to sign in to multiple sites or set up a Gravatar profile on each one.

Why use Gravatars?  It makes things much simpler for the user.  There is no need to create profiles or sign in to different WordPress sites.  It helps site administrators because there are no user accounts to manage or the need to make space for users to upload their own avatars to the server.  It is all done just once, and it uses the Gravatar server space instead of individual sites.

Activating Gravatars on a WordPress site is simple.  Log in, go to Settings, Discussion, and scroll down to Avatar.  Then simply turn Gravatars on.  You can customize the appropriateness of the Gravatars allowed on your site and you can set a default Gravatar.

However, that does not give you very much control over how a Gravatar looks on your WordPress site.  Fortunately, there are a few different ways you can customize this using code.  Here are a few different options you have.

Size: 

By default, a Gravatar will be 32 pixels by 32 pixels in size.  However, you can change this by entering the following code in your posts:

<?php wp_list_comments( array( ‘avatar_size’ => ‘45’ ) ); ?>

This code will change the Gravatar size to 45 pixels by 45 pixels.  Replace the number with the size desired.  Note that Gravatars are always square.

Using CSS to Customize Gravatars:

You can also use CSS to change the size of your Gravatars.  This is done by manipulating the .avatar class that WordPress creates for all Gravatars.  However, you have to make certain that you only change the properties of a specific Gravatar instance, not the entire .avatar class unless you want your own Gravatar to change.  Since your Gravatar may appear in other areas of the site besides the comments, you may not want that.

To change Gravatars in the comments, create the following structure in your theme CSS:

.commentlist .avatar {

--fill this section with the code describing the changes you want.

}

Create a New Default Gravatar

Don’t like any of the default Gravatars that WordPress offers?  There’s a way you can get around that, although again, it takes some coding.  First, upload the new Gravatar image you want to use to the theme files of the theme you’re currently using.

Now open the themes function.php file.  You’ll need to add a short bit of code:

Note: Add the URL where the image file for your avatar is located in the fourth line of code instead of /image_file_locaiton.png.  You can also change the text ‘Your New Default Avatar’ to whatever text you want to see next to the Gravatar when selecting it.

<?php

add_filter( 'avatar_defaults', 'new_default_avatar' );

function new_default_avatar ( $avatar_defaults ) {

$new_avatar_url = get_bloginfo( 'template_directory' ) . '/image_file_location.png';

$avatar_defaults[$new_avatar_url] = 'Your New Default Avatar';

return $avatar_defaults;

}

?>

Now go to Settings, Discussion, and look at the Avatar section.  Your new Gravatar option should be there with whatever text you set appearing next to it.

Share it!Share on FacebookTweet about this on TwitterShare on Google+Email this to someone

Our Recommended Wordpress Web Hosting Provider

WordPress

WHC.CA
Get a 50% Discount by using our link.

WHC.ca

Reliable host, with excellent customer service and an easy one-click Wordpress installation. Our recommendation to host a Wordpress blog.

Leave a Reply

Your email address will not be published. Required fields are marked *