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.


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:


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:

  
  1. id="comment-">

Replace:

  
  1. id="comment-">

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.


. . .

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;
	}

Posted

in

by

Comments

4 responses to “Gravatars Use Easy”

  1. Lyndi Avatar

    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 Avatar

    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; }

  3. […] Gravatars Use Easy […]

  4. […] search engine. If you are using WordPress as your blog platform, there is a detailed tutorial at https://wpengineer.com/gravatars-use-easy/. By the way, Gravatar is an Automattic Joint and so is […]