WordPress Plugin: Wavatars
Previous: Wavatars Development | Next: Wavatars Process |
Overview:
Wavatars is a plugin that will generate and assign icons to the visitors leaving comments at your site. The icons are based on email, so a given visitor will get the same icon each time they comment. It livens up comment threads and gives people memorable “faces” to aid in following conversation threads. It’s also fun.
Features:
- Wavatars can generate 956,384 different shapes in 57,600 different color combinations for a total of 55,087,718,400 (55 billion) unique Wavatars. Yeah, you should have plenty. You’ll run out of human beings (or hard drive space) long before you run out of Wavatars.
- The icons are generated on-the-fly. You can adjust the desired size of the icons.
- For easy deployment, icons will automatically preceed the commenter’s name. You can set HTML to come directly before and after the icon (to put it inside of a <DIV> tag, for example) or you can control the placement of the icons manually if you don’t mind adding a single line of PHP to your theme.
- Wavatars are based entirely on email and are thus very portable. The same email will result in the same Wavatar, even on different sites, so users will have the same icon on all Wavatar-enabled sites. (Assuming, or course, that there are other Wavatar-enabled sites. I don’t know if anyone will want this plugin or not.)
- This plugin also supports Gravatars. If you like, it can show the Gravatar for a given user (if available) and fall back on their Wavatar only if they don’t have a Gravatar set up. This means users can choose to set up a unique icon for themselves, and if they don’t, they will be assigned a unique Wavatar. This is a great system that lets people personalize if they want, yet still provide a decent icon for the lazy or apathetic.
Installation
- Download the plugin.
- Copy it onto your website in the wordpress
/pluginsfolder. Then enable the plugin. That’s it. Wavatars will instantly appear for all posts (even old ones) on your blog. If you don’t like how the image looks within your theme, read on…
The administration panel is under Options » Wavatars. You can adjust the size of the Wavatars, and assign HTML to come before and after each image to help nudge it into place. Each image is also set with the CSS “wavatars” class. On this site, I don’t have any HTML prefix or suffix, and instead just added these lines to my CSS:
.wavatar {
float: left;
padding: 3px;
background: #fff;
margin-top: -25px;
margin-left: -25px;
margin-right: 5px;
}
If that still doesn’t give you enough control over wavatar placement and you don’t mind editing your theme, just turn off automatic placement and add the line wavatar_show($comment_author_email); to your comment loop wherever you want the image to appear.
Your mileagle may vary. It all depends on your installed theme.
Note that the plugin requires that your install of PHP support the GD library. If it doesn’t, the Wavatars won’t show up and you’ll get a warning in the Wavatar admin panel. You can still use this plugin to display Gravatars, even if the GD library isn’t available.
This is the first release. You could even go so far as to call it “beta” if you want to be formal about it. It’s only been tested on one server (this one) so far. Please leave bug reports and questions in the comments below.
Download Wavatars v1.0.0
Previous: Wavatars Development | Next: Wavatars Process |

Nice job, Shamus. Are the icon sets customizable? I’m guessing it isn’t a coincidence that yours all look like dice.
testing mail
Well I guess this is for those who would like ot have the same info. Nice of you to post it.
Wonder what I’ll get.
Yes, you can edit the PNG files that are used to build the Wavatars. There are a few limitations, though. I’ll put up an explanation of how the process works later.
Good work team! The plugin work it perfectly!!
Saludos desde Tenerife!
Just checking it out now.
Pretty neat, but after a while, all the shapes start blending together in my head. Then I have to start looking at names again.
Maybe a shift from pastels to more saturated palette would help?
Very cool.
Also: Will’s is scaring me a little bit.
I think will’s is a gravatar.
Wondering what mine will be. And I have to agree with Roy, Will is scaring me..!
On a slightly random note… I recall that you don’t like “dark background” themes. Is this why the d20 at the top right has a 1 rather than a 20 showing?
Oh, and I love the wavatars.
Love it. Such a simple idea. Did you make all those images by yourself?
I think the picture it generated for Shamus is the best one.
And of course I have to see what my email address looks like…
Have to see what my wavatar looks like too!
Cool! thanks! Got fb updated with it!
Bespectacled and argumentative! How appropriate!
Of course, this plugin will generate a flood of comments to the tune of, “I wonder what my wavatar will look like?”
…sort of like this comment. :)
This is great. I’ve added it to my blog as well. Happy Day.
I have a Gravatar, so it should show that one… Hmm, but this is a good idea for people who don’t feel the need for a Gravatar, but who still comment every once in a while.
Just checkin’ my wavvy ;)
Heh, I like it :)
This is an excellent idea. Great work!
With my luck, I’d get a pink triangle.
…not that there’s anything wrong with that; it’s just not me…
Good thing I got a Gravatar. :D
Wavvy check!
If I ever make a blog, this is the first plugin on there. And they mesh well with the theme here, too.
Holy crud! I just realized that THESE ARE YOUR CHILDREN, Shamus!!
I thought they were someone else’s work, like the Gravatars…
That’s cool of you to code that up; I hope they get picked up on other sites. Congrats, and please ignore any unintentional but implicit criticism in my previous post.
Cool!
Yes, mine is a gravatar.
I suspect my email address would have to be something epically GAR to make the wavatar generator spit out that particular image.
Interesting Plugin ^^ Testing now…
I wonder what my Wavatar will look like?
To differentiate this post from any other ones asking this same question, I shall add this whole paragraph of entirely useless information, that has absolutely nothing to do with Wavatars, this site, or anything else, other than to differentiate this post from other ones asking the above question, by rambling on about rambling on about the useless information contained in this paragraph in this comment of the above post by Shamus about what this comment used to be about, before I started rambling on about rambling on about the randomly useless information found in this randomly useless comment.
Furthermore, this large block of text may grab the attention of random viewers of this comment better than a short sentence asking the question that was already asked in the first sentence of this random comment about randomly useless information found in this randomly useless comment. And to those people who are still reading this comment, I say to you: “Don’t you have anything better to do?”
I have come to the unfortunate realization that I have no idea what I’m doing.
I would like to use gravitar, but I don’t know how; that is, I’ve set up an account and have a grav selected but I am uncertain how to apply it here.
I read the bit about using a plugin but couldn’t decipher it as I am a hapless noob.
Any “for dummies” style advice on this matter would be greatly appreciated.
Testin’ my email.
These are cool. Now to see what mine looks like.
Very nice set of updates, I love the way the site is looking, Please keep up the good work entertaining us!
Very nice Shamus, and good of you to share your work.
Spookily my Wavatar wears glasses just like me…
sweeeet!!
I just installed the plugin on my blog without any problems whatsoever. Nice work! :) Now if you added an option to set a default avatar for users who didn’t leave their email or even an option for them not to use any avatar at all, it’d be perfect. :)
Or not… it was different last time I checked (don’t post that often, so I looked bact t one of the DMotR threads). Liking the monocle though :D
Nice Shamus! Although I do agree that the colors are a little bit jarring – at least for me. But I’m impressed on how well it is working.
@NobleBear – are you using the correct email?
1. set up the gravatar account with your email address
2. select the default gravatar on the site
3. visit shamusyoung.com
4. scroll down to comment
5. locate the Mail (will not be published) (required) field
6. recall the email you used in step 1
7. put the email from step 1 into the field from step 5
8. post your comment
9. ???
10. profit
You do not need any plugin – plugins are for blog owners who want to have gravatars displayed in their comments. Commenters do not need to add anything.
Oops, one more suggestion: The &s in the gravatars url aren’t escaped properly and the -tag isn’t closed – you should fix that in your code. :)
Brilliant idea, and glad to see it released.
I’m really thrilled that a couple of people were able to install it, and that it seems to be working more or less seamlessly.
Planned features:
* A graceful way of handling blank emails. (I forgot some sites allow this.)
* Maybe some options for color? I’m not sure about this, but the “bag of skittles” look seems to be off-putting for some. Maybe a way for the admin to force a certain range of hues to keep the plugin from clashing with the theme? I’m not sure, since this would break the “universal” nature of the wavatars. I’ll think about this.
Feylamia: I know the character escaping looks really odd, but that’s how the directions at Gravatar.com say to do it. I tried changing it to be more “correct”, and it broke.
What “-tag” isn’t closed?
This is a really neat idea
The more I look at these the more tempted I am to set aside my hatred of PHP and try to make these work in a web forum (and I’ve got my sights set on SMF). A bunch of regular posters on my forum don’t have an avatar so something like this would really spice things up. Since a valid e-mail address is required to sign up, this sort of thing could very well work.
Hmm… *ponders*
I noticed you use md5 for the wavatar generation, so dorks like me won’t reverse them to get at people’s email addresses. Maybe I should try making wavatar rainbow tables. That couldn’t possibly fail to be fun…
Anyway, great work. If I weren’t too boring to have a blog, I would install wavatars on it straight away, whether it uses wordpress or not.
Very much awesome!
Good idea hooking to the
get_comment_authorfilter. I had been thinking putting in an image there would mess up the html but now that I think about it an image is fine inside a span or cite or link or whatever. I’m going to have to steal that. Pretty nice just using the seed % number_of_parts too.One thing I was debating when making my own was that if you don’t add something to the md5 hash, the image name makes a sort of tracer for each user. So I think you could search for say 12345abcde30c6a0.png and find every thing that person had said on any blog. I’m not sure if that’s a good thing or not. You can stop that by adding something like the blog name (or blog email if you want to be really paranoid since it’s not public) as salt in the hash. You’d have to do a separate hash for the image name and the part generation then (so the images stay consistent across blogs). But I’m still not sure if being able to find all comments is bad or cool.
Sorry for double-posting, I hadn’t seen message 37. Here’s a suggestion for the color thing: Use the hash to generate the random colors the way you already do, and then scale each component to a range specified by the website admin. That doesn’t allow complete color scheme customization, but it should work. Anyway, that will maintain shape universality, and coloration differences between any two wavatars will be universal-ish. In the context of other wavatars, they should still be recognizeable.
ScottSM: I would argue that someone who doesn’t want their other comments on other wavatar-using blogs located should not be using the same email addresses, since wavatars themselves are traceable and could be searched for with a specialized crawler. Perhaps the solution would be an opt-out from wavatars when posting a comment.
Speaking of the hashes, I just realized that wavatar rainbow tables would be redundant, since the current system does make the hash of the email available.
So, I would probably set all this up if I still had a WordPress. But since I don’t, I’m just going to play on your site. Yay! I may eventually sit down and add support for Gravatars to Pixelpost though. That could be fun. But in the meantime… Let’s see how this puppy looks.
Interesting…
Looks nice. One question to Shamus: would it be ok to implement Wavatars in non-wordpress blogs? (I’m thinking of implementing it on mine when it’s ready)
just checkin’ mah wavvy
just curious
PORFECT WAY
AWFULLY BEAUTİFUL
just testin’
holla rolla, gimme a wavatar…
Here is a test to see a cute wavatar for me
Test. Test. :)
This is me…
Hmmm. switch off gravatar may help….
This sounds like fun.
Heh, kinda accurate, although in a stereotype sense rather than physical.
(obligatory-post-to-see-what-I-get)
Cool! It looks like you have some rendering issues in IE6: the top-left corner of each image is cut off. This is the case with both types of image.
well excuse me for being curious.
oh, and you do know you can shorten:
<?php echoall the way down to:
<?=if you want to right?
oh, you also have a spelling error:
shouldn’t that read “md5″?
and am I allowed to edit this around and such to let it be used on a forum? I’d give full credit.
I may need to register for Gravatars and use one white pixel now…
I have to know what I look like
‘precede’ for posterity.
I don’t know why you’re being so self-deprecating in point 4. This is cool software.
Edhel: It’s all GPL’d. Help yourself!
scragar: Thanks for the heads up. Yes, please help yourself to the source. I hope it’s useful for you. :)
test of the system
How does the
wp-content/cachedirectory work in WordPress? I didn’t have one in my test installation (WP 2.3.1) and it didn’t get created automatically. I did have one in my main blog. I seem to remember making it when I installed WP Cache. Are other people having trouble with that (activating the plugin and nothing happens)? If so, then just create the directorywp-content/cache/wavatarsand make sure it’s writeable.Nice. But I am basically amazed at anyone who can write a plugin for WordPress. I cannot even figure how it produces feeds.
yet another meaningless comment to see what special face my email provides.
ditto