Gravatars Use Easy


Since version 2.5 of WordPress, Gravatar service is included in the core files. On one hand, you can use it to make the comment overview more nicely. But you can also integrate this function in your template and you don't have to use a Plugin.

You just have to insert the following syntax and the little pictures will be displayed in your comment area of your theme.

<?php if(function_exists('get_avatar')) {
	echo get_avatar( $comment );
} ?>

The function get_avatar() (/wp-includes/pluggable.php) has 3 parameters, so you can adjust it easily to your liking.

  • $id_or_email Mail address or ID of the users, commentators
  • $size Size of the Gravatars in pixel
  • $default Default image, if the user doesn't have a Gravatar yet
get_avatar( $id_or_email, $size = '96', $default = '' )

As default Gravatar it loads http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536 , this is the icon for the email address unknown@gravatar.com (MD5 verschl├╝sselt: d516503a11cd5ca435acc9bb6523536). The default size is 96 Pixel. You just have to assign the first parameter or variable.

The output would look like this:

<img alt='' src='http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=96' class='avatar avatar-96 avatar-default' height='96' width='96' />

Thus you can adjust the design with the help of CSS. The class avatar is available. Also you can use the class for the size of the Gravatar: avatar-size. Varied formattings are possible.

How to implement?

Since many people asking how to implement it, here is a short instruction for non-PHPler.

The code has to be in comments.php, it displays the comments and comment form. Of course it can be different, but in most themes it will be like that.

The function has to be in every output of each comment, that means it has to be within the loop <?php foreach ($comments as $comment) : > .
Normally after the li, which displays every comment.

Search:

  <ol class="commentlist">

    <?php foreach ($comments as $comment) : ?>

       <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">

Replace:

  <ol class="commentlist">

    <?php foreach ($comments as $comment) : ?>

      <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
        <?php echo get_avatar( $comment, 32 ); ?>

Some themes aren't using a list (ol or ul); the output gets create by div. The important thing is, it has to be in the loop.

<?php foreach ($comments as $comment) : ?>
. . .
<?php endforeach; /* end for each comment */ ?>

Format via CSS

The format could look like that. This syntax goes to the style.css of your used theme.

.commentlist li .avatar { 
	float: right;
	border: 1px solid #eee;
	padding: 2px;
	background: #fff;
	}

Comments are closed.

4 comments

  1. Lyndi

    This will of course not work in themes written specifically for WordPress 2.7. Things are done rather differently there. I am still struggling to figure out exactly how one goes about styling the avatars in the new code. I have managed it but it is not done optimally. Maybe you could let us have this info in some later post. Thanks.

  2. Michael

    Lyndi, I dont know why Frank published this old post from his german blog ­čśë

    I think, you can do alot with css like:

    .avatar { width: 30px; height: 30px; padding: 3px; border: 1px solid #00000; }

2 pingbacks

  1. The spirit of Wordpress #7 !
  2. Owning a Caf├ę | An Xicowner's Blog