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',' ',''); ?></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.
Popularity: 9% [?]
July 16th, 2008 at 1:33 pm
Hey! Great Post! I might use this on my blog. Keep up the good work.
August 13th, 2008 at 9:40 pm
Thanks for this just what I was looking for!
August 19th, 2008 at 2:28 am
Just signed up for gravat, so I want to see how this works.
August 22nd, 2008 at 9:38 am
I just know even was 2 years blogging LOL.
October 11th, 2008 at 10:13 am
Thanks!
October 27th, 2008 at 3:25 am
Just what I was looking for!
November 11th, 2008 at 12:55 pm
Realy informative post. Keep up the good work.
I happened to need his info, so thank you very much.
November 14th, 2008 at 10:04 pm
I didn’t knew about gravat I will sign up.
January 14th, 2009 at 4:42 pm
I was pulling my hair out for ages trying to style that one little part but now I’ve managed with your help.
Many Thanks.
January 25th, 2009 at 7:10 pm
Thanks!
February 8th, 2009 at 4:21 am
excellent work
February 12th, 2009 at 10:05 pm
Thanks for the great post. Trying out my new Gravatar
March 9th, 2009 at 3:35 am
great tip, just implemented it on my comic site. thanks a bunch!
April 10th, 2009 at 8:23 am
[...] a step-by-step guild on what codes to add, where to add them and what to change. I read through that page and followed all the steps and it still wasn’t working. I still had 2 boxes of avatars [...]
May 15th, 2009 at 1:14 am
Great Article.
It worked like a charm!
Thanks a bunch!
May 23rd, 2009 at 3:32 pm
great , i love your tips
June 10th, 2009 at 12:56 pm
I greet with your points!
June 16th, 2009 at 10:14 pm
verry nice thnx
June 18th, 2009 at 8:45 am
great , i love your tips
June 22nd, 2009 at 10:25 pm
Thanks very nice
June 23rd, 2009 at 11:05 pm
Just signed up for gravat, so I want to see how this works.
June 26th, 2009 at 3:28 pm
Nice!
Thanks for the help
June 27th, 2009 at 6:09 pm
thank you very much
this is i’m looking for
June 30th, 2009 at 8:06 am
thanks for the awesome post … this is what i’ve been looking for …
June 30th, 2009 at 8:07 am
just sign up … thanks
July 6th, 2009 at 3:39 pm
thank you very much
nice article
July 7th, 2009 at 11:23 am
Perfect! I’ve been trying to change that stupid-looking default picture on comments in Wordpress, excellent article.
July 8th, 2009 at 6:37 am
In order to change your gravatar , you just need to take your Gravatar code and add the image (new)URL right after the comma:
Default
Changed
Just it
korean fashion wholesale
July 18th, 2009 at 12:37 am
Thanks for the guide, i hope its still working on wordpress 2.8.1
July 21st, 2009 at 8:38 am
thanks for you to share . it is so useful for us
July 21st, 2009 at 1:31 pm
very good, thank you!
July 21st, 2009 at 10:37 pm
thanks.I have been upgrade 2.7 to 2.8 ,I hope it’s still useful
July 22nd, 2009 at 1:33 am
great tip, just implemented it on my comic site. thanks a bunch!
July 22nd, 2009 at 8:26 pm
thank you
nice post
July 23rd, 2009 at 9:59 pm
Thanks for the guide, i hope its still working on wordpress 2.8.1
July 25th, 2009 at 12:08 am
i thought it would have just been a matter of saving over the default image… obviously not so thanks for your help, finally got it working.
July 27th, 2009 at 6:51 am
Thanks for this share !
July 28th, 2009 at 11:59 pm
“Your article are very impressive. Thank you so much.”
July 29th, 2009 at 1:52 am
Perfect! I’ve been trying to change that stupid-looking default picture on comments in Wordpress,bolgesel sayiflama.. excellent .article.
August 5th, 2009 at 11:21 am
Nice, finally found what i’ve been lookin …thanks a lot
August 8th, 2009 at 7:56 pm
thanks. will try it out!
September 17th, 2009 at 10:37 pm
I was pulling my hair out for ages trying to style that one little part but now I’ve managed with your help.
September 18th, 2009 at 1:29 pm
Very helpful post. Thanks for the tip. I also like the design of your site, very easy to follow. Thanks again.
September 18th, 2009 at 1:30 pm
Does it automatically recognize your image? Or does it only pop up if you put in the right e-mail addy?
September 20th, 2009 at 2:03 pm
…only popup if you put the right email.
In your Gravatar.com account, you can add as many email addresses as you wish and select a different image for each.
September 23rd, 2009 at 4:33 am
very nice, but my website was done with joomla
thanks
September 23rd, 2009 at 9:40 pm
Testing on my avatar. It doesn’t appear in my own blog.
October 5th, 2009 at 7:39 pm
I tested it, and works just fine.Thank you so much.
October 9th, 2009 at 4:41 am
Very helpful post. Thanks for the tip. I also like the design of your site, very easy to follow. Thanks again.
October 20th, 2009 at 8:27 pm
Hi
It is the biggest secret revealed today.
I will change my avatar right now by this method.
Thanks
regards !
Smith
October 28th, 2009 at 12:39 pm
Perfect! I’ve been trying to change that stupid-looking default picture on comments in Wordpress,bolgesel sayiflama.. excellent .article.
October 30th, 2009 at 11:15 am
tnks for all
November 2nd, 2009 at 1:54 pm
Thank you for sharing. Great!
November 4th, 2009 at 2:11 pm
Thank you very much for everything
November 6th, 2009 at 10:09 pm
perfect blog thaks for boarding
November 15th, 2009 at 12:46 am
Yah! i already tried using gravatar but i really don’t want to see my face on my post. lol
November 16th, 2009 at 3:29 am
Thanks! That is all I needed!
January 1st, 2010 at 3:31 pm
Just testing my gravatar on your site..
January 6th, 2010 at 2:28 pm
I have an avatar for my yahoo account, how do I get the same image as gravatar ?
January 16th, 2010 at 1:09 pm
Thanks for this!Just what I needed.
January 23rd, 2010 at 2:17 am
Thanks for the great post. Trying out my new Gravatar
January 24th, 2010 at 4:11 am
Yah! i already tried using gravatar but i really don’t want to see my face on my post. lol
January 25th, 2010 at 4:59 pm
Hi there.
Great Article.
It worked like a charm!
Thanks a bunch!
John
January 31st, 2010 at 8:57 pm
Thanks for the tips. Great article for us
February 7th, 2010 at 7:12 pm
Found your blog on Ask and was so glad i did. That was a great read. I have a quick question.Is it alright if i send you an email???…
February 10th, 2010 at 9:51 pm
Hey, nice post. I just found this blog, but I will definitely visit regularly. Keep us updated.
February 18th, 2010 at 12:01 am
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
March 6th, 2010 at 9:09 pm
Thank you very much Great post…thanks for share this.
………………………………
March 15th, 2010 at 2:58 am
Thanks for this useful post.
March 16th, 2010 at 3:41 am
Just signed up for gravat, so I want to see how this works..