How to change default avatar in Wordpress 2.5+

An avatar or Gravatar (Globaly Recognised Avatar) is a small image that appears next to your comment on any posts. It’s your profile picture. It will appears any time you leave a comment on a blog or forum. Here’s a screenshot of some comments taken on my site:

How to use Gravatar on your site

The avatar feature is by default supported in Wordpress 2.5+. Log into Wordpress and click Settings then Discussion. Scroll down to the bottom of the page to Avatar Display and select Show avatars. Click Save changes. This will turn on avatars on your site.

If you don’t have a Gravatar yet, you will need to create one here ». When you sign up to Gravatar, enter the email address you usually use to leave comments on sites and forum.

Change default avatar

If you open the default Wordpress theme and open comment.php (/wp-content/themes/default/) in a text editor you can see this line:

<?php echo get_avatar( $comment, 32 ); ?>

This code displays the gravatar of the commenter on your posts. ‘32′ is the size of your image in pixels.

If commenter didn’t sign up to Gravatar, the default avatar will be displayed. Here’s an example:

Now let’s see how to change the default avatar by your own image. In my case, I chose to use my logo as my default avatar (good for branding). First, create an image 32×32 and save it into your image folder (e.g. /wp-content/themes/default/images/). Now change the default code line above by this one:

<?php
    $urlHome = get_option('home');
    echo get_avatar( $comment, $size='32', $default = $urlHome . '/wp-content/themes/default/images/avatar.jpg' );
?>

The first line will get the domain name url of your site (e.g. http://yoursite.com). The second one ($default) will retrieve the avatar image from your folder image. Change the url path to your image in the line above (/wp-content/themes/default/images/avatar.jpg).

And now a full example:

<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
   <?php
       $urlHome = get_option('home');
       echo get_avatar( $comment, $size='32', $default = $urlHome . '/wp-content/themes/default/images/avatar.jpg' );
   ?>
   <cite><?php comment_author_link() ?></cite> Says:
   <?php if ($comment->comment_approved == '0') : ?>
   <em>Your comment is awaiting moderation.</em>
   <?php endif; ?>
 
   <small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title="">
   <?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> 
   <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?></small>
   <?php comment_text() ?>
</li>

Style your avatar

Next step will be to style your avatar to make it look more like a photograph. Open style.css in your text editor or navigate to the dashboard and click Design then Theme Editor. Scroll down to the bottom of the page and select Stylesheet (style.css) in your right sidebar. This will open style.css in the theme editor. Find “.commentlist li .avatar” in your stylesheet. If it doesn’t exist, add the code below after “.commentlist li”:

.commentlist li .avatar {
	float: left;
	border: 1px solid #EEEEEE;
	padding: 2px;
	background: #FFFFFF;
	margin-right: 7px;
}

This will display the avatar on the left of the commenter name and add a border to it.

The end result:

Done!

Avatars should be enabled on your site now. But if you run into a problem, you can check the Wordpress Gravatar documentation or leave me a comment and I will try to do my best to help you.

Technorati Tags: wordpress, gravatar, avatar, tutorial

Popularity: 10% [?]