Updates by Email
RSSHow To Add Avatars To Your WordPress 2.5 Theme
Over the last week, you may have noticed that the comments on this site now have little pictures next to them. Have you been wondering what they are? Those are gravatars from Gravatar.com. A gravatar (or globally recognized avatar) is simply a picture that follows a commenter around from site to site when they leave comments.
Why Would You Want That?
A picture is worth a thousand words, really. As a commenter, having gravatar allows you to create a more recognizable online identity that spans across sites. As a site owner, allowing a commenter to have a picture next to their comment makes them infinitely more recognizable when you run across them in your surfing. Unfortunately, gravatars only show up on sites that have gravatar support enabled.
Since Gravatar.com is run by Automattic, the same company that runs WordPress, gravatar.com support was rolled into WordPress 2.5. If you have a WordPress blog, you can easily add support for gravatars by adding a few lines of code to your current Wordpress theme. If this is something you’d like to do, the complete instructions are below.
There are four basic steps:
- Backup your stylesheet and your comments.php just in case.
- Turn on Avatar support in your dashboard
- Add one line of code to your comments.php file
- Add a section to your stylesheet to get the avatar looking the way you want.
1. Backup Your Files
Whether you simply copy the contents and paste them to a text file, or back up your entire site, backing up takes only a couple of minutes and could be the difference between 15 minutes of quick, happy little edits and 2 hours of chasing down a misplaced semicolon. I suggest backing up your comments.php and stylesheet before you edit them, but I leave this step up to you.
2. Turning On Avatar Support
- Log into WordPress and click on Settings then Discussion
- Scroll down to the bottom to Avatar Support and select Show Avatars
- Set the Maximum Rating
- Click Save Changes.
3. Add The Code To Comments.php
Click on Design and then Theme Editor, and under Theme Files (on the right) click Comments (comments.php)
When you find a section that looks something like the following, you’re seeing the start of the comment loop:
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<cite><?php comment_author_link() ?></cite> Says:
Insert a line before the line that starts with <cite>, and insert this line:
<?php echo get_avatar($comment,'50','' ); ?>
50 is the size of the avatar in pixels, and if you’d want to specify your own default avatar (as I did), add its URL between the final ''. If you choose not to include the 50 or specify a default avatar, the function will pull a default avatar from gravatar.com at 96 by 96 pixels.
You should now have something like this:
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<?php echo get_avatar($comment,'50','http://mysite.com/default.png' ); ?>
<cite><?php comment_author_link() ?></cite> Says:
That’s it. Now click Update File to save your changes.
4. Style Your New Avatars
Now that avatars are enabled in your theme, we’re going to add a border to them to make it more like a photographs and set the comment text so that it lines up a little nicer.
Click Design, then Theme Editor and then scroll to the bottom and click on Stylesheet.
If you have a section called .commentlist li .avatar, then you just need to add in what's between the brackets to that section. If you can't find that section, find the .commentlist li section and insert the following section below it.
.commentlist li .avatar {
float:left;
background: #fff;
border: 1px solid #bbb;
padding:5px;
margin: 0px 15px 0px 5px;
}Now that the avatars have a nice border and lined up, we have to make one more edit to stop longer comments from wrapping under them. Find margin: 10px 5px 10px 82px; in the .commentlist p section of your stylesheet, and change the fourth value (the left margin) to push the comment text out from under the avatar. For this site, I had to set it to 82px, but you might have to play with that number until yours lines up.
Now click Update File to save your changes.
You're Done!
Avatars should be working on your site now, but if you run into snags, you can check the WordPress Gravatar documentation, or drop me a comment and I'll do what I can to help out.
Wait Wait Wait! Where Do I Get An Avatar Of My Own?
Go to Gravatar.com and signup with the e-mail address that you usually leave comments with. Once you upload a picture, whenever you leave a comment on a site that supports avatars, your picture should show up next to your comment.
Share, Bookmark, or E-Mail This Article
May 21st, 2008 at 8:30 am
I wonder how difficult it’d be to add gravatars to ExpressionEngine. Hmmm.
May 21st, 2008 at 10:07 am
There’s an expression engine gravatar plugin, so it should be really easy.
May 21st, 2008 at 10:31 am
Hah, wow… I guess it would be!
Thanks for the linkey!
June 11th, 2008 at 11:22 am
Thanks for the post.
When you link to the default avatar you are specifying the domain e.g http://www.mysite etc.. is there a way of fetching the sites url from wordpress dynamically?
I’m trying to develop a theme locally on my computer so I specify http://locahost.. etc as the link to my avatar, using your method I have to make changes comments.php once I’ve uploaded the theme to a server. I’m sure there must be a way of do this dynamically.
do you know?
thanks
June 11th, 2008 at 3:36 pm
Because there is no icon stored at gravatar.com, there is no way to pull the site from them. All they store an e-mail and a picture. Is that what you mean?
June 11th, 2008 at 7:16 pm
Thanks for your reply.
I don’t think I explained myself very well.
If you were creating a theme on your home computer running PHP and Apache, and you want to link directly to a image, you would use a link such as:
http://localhost:8888/wordpress/images/default-avatar.gif
But once you move that online, say, to http://www.foobar.com, the localhost link will no longer work requiring you to manually change the link in the comments.php file eg to something like this:
http://www.foobar.com/wordpress/images/default-avatar.gif
I’ve seen elsewhere in the Wordpress code lines that seem to call the site url dynamically from the database (?), such as this:
/images/Avatar.jpg
I was thinking that in your line of code:
the “http://mysite.com/” could be created by asking wordpress database for the sites url.
I know very little php and can’t seem to create the right code to create the link to my default avatar.
Would you know how to do that?
I hope that is clearer.
S
June 11th, 2008 at 7:20 pm
Sorry my post didn’t show the php lines.
I”ll try again….
———————–
I’ve seen elsewhere in the Wordpress code lines that seem to call the site url dynamically from the database (?), such as this:
bloginfo (’stylesheet_directory’); ? > /images/Avatar.jpg
(ignore the extra spaces)
I was thinking that in your line of code:
get_avatar ( $ comment, ‘50′, ‘http://mysite.com/default.png’ )
the “http://mysite.com/” could be created by asking wordpress database for the sites url.
———————–
June 12th, 2008 at 8:35 am
You could make a call to the database, but that assumes that everyone will store the icon in the same place. It’s also another call to the database that you don’t really need. You could also eliminate the call to the default icon altogether because Gravatar will use it’s own default icon if no default icon is specified.
Does that help?
June 16th, 2008 at 7:26 am
This was great and I was able to easily install it. My question, though, is that once installed all of my comments showed up with default avatar images, when I know many of those commenting have specified avatars. Am I missing where to pull them from?
Thanks for the help.
June 16th, 2008 at 9:07 am
Sorry, another thought – I think perhaps the ones I know who have avatars are set up in the WordPress profile settings that they have, and not actually a gravatar. When I checked their comments on other sites and looked at the source code for the avatar, it is coming up as a WordPress image, not gravatar. How would I account for pulling these as well?
Thanks again!
June 17th, 2008 at 10:27 am
@Chelle: That would require a call to each commenter’s blog to grab their icon. It’s similar to what Buddy Love does in the sidebar, but I think you’d have to build a plugin to efficiently make the calls to the other sites, because I’m not sure that the code is built into Wordpress like the Gravatar support is.
July 18th, 2008 at 11:59 pm
A very simply put yet excellent tutorial. Thank you very much for it.
I’m having some trouble with aligning the actual comment with the author’s name and metadata, as you have set on this very page. The CSS code actually doesn’t contain any .commentlist p. Could you possible guide me here?
July 19th, 2008 at 10:42 am
@Saeed: Add the following code and change the 82 until the comment lines up.
.commentlist p {
font-weight: normal;
text-transform: none;
margin: 10px 5px 10px 82px;
}
July 26th, 2008 at 11:47 am
Thanks for the help! Worked like a charm when I was setting up Wordpress 2.6. I wonder why they didn’t change the template to show the avatar in the default theme?
January 19th, 2009 at 2:13 pm
Nice, and helpful
February 4th, 2009 at 3:58 pm
Great tutorial! Simple!
March 26th, 2009 at 7:03 am
[...] to http://www.blogohblog.com/, http://www.dyers.org/blog/archives/2008/05/21/how-to-add-avatars-to-your-wordpress-25-theme/ and Jason I was able to fix some issues I was having with the Gravatar section of the theme which [...]
April 22nd, 2009 at 4:57 pm
Hi This worked well.
Is there anyway to form an href around the avatar itself so it has the same link as the comment author (if any)
April 22nd, 2009 at 5:22 pm
[...] How To Add Avatars To Your Wordpress 2.5 Theme – Jon Dyer’s Blog [...]
May 9th, 2009 at 8:43 pm
What if someone does not choose a gravatar? Does a generic one get assigned?
July 12th, 2009 at 7:22 pm
Thank you so much for this guide!
Worked fine for me!
Greets from Germany
August 22nd, 2009 at 1:36 pm
Thank you so much for this guide!
Worked fine for me! (2)
Greets from Brazil!!!
January 10th, 2010 at 5:52 pm
could you please tell me how to put the comment metadata below the avatar and the comment to the right?
Thank You