WordPress Plugin: Wavatars

 By Shamus Dec 17, 2007 520 comments

wavatars.jpg

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:

  1. 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.
  2. The icons are generated on-the-fly. You can adjust the desired size of the icons.
  3. 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.
  4. 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.)
  5. 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

  1. Download the plugin.
  2. Copy it onto your website in the wordpress /plugins folder. 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

FIVE HUNDRED!20520. There are now n+1 comments, where n is a ridiculous number.


1 2 3 8

  1. Mike says:

    Nice job, Shamus. Are the icon sets customizable? I’m guessing it isn’t a coincidence that yours all look like dice.

  2. Adam says:

    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.

  3. Shamus says:

    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.

  4. Will says:

    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?

  5. Roy says:

    Very cool.
    Also: Will’s is scaring me a little bit.

  6. Joe says:

    I think will’s is a gravatar.

  7. Timo says:

    Wondering what mine will be. And I have to agree with Roy, Will is scaring me..!

  8. Snook says:

    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.

  9. Love it. Such a simple idea. Did you make all those images by yourself?

  10. I think the picture it generated for Shamus is the best one.

  11. Ryan says:

    And of course I have to see what my email address looks like…

    • Craig A says:

      Have to see what my wavatar looks like too!
      Cool! thanks! Got fb updated with it!

  12. Ryan says:

    Bespectacled and argumentative! How appropriate!

  13. Rask says:

    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. :)

  14. This is great. I’ve added it to my blog as well. Happy Day.

  15. AlphabetFish says:

    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.

  16. Oleyo says:

    Just checkin’ my wavvy ;)

  17. Oleyo says:

    Heh, I like it :)

  18. BillZeBub says:

    This is an excellent idea. Great work!

  19. Telas says:

    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

  20. Uninverted says:

    If I ever make a blog, this is the first plugin on there. And they mesh well with the theme here, too.

  21. Telas says:

    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!

  22. Will says:

    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.

  23. Froody says:

    Interesting Plugin ^^ Testing now…

  24. xbolt says:

    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?”

  25. NobleBear says:

    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.

  26. Xiphos says:

    Testin’ my email.

  27. laesin says:

    These are cool. Now to see what mine looks like.

  28. Matt T. says:

    Very nice set of updates, I love the way the site is looking, Please keep up the good work entertaining us!

  29. Avaris says:

    Very nice Shamus, and good of you to share your work.

    Spookily my Wavatar wears glasses just like me…

  30. laesin says:

    sweeeet!!

  31. Feylamia says:

    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. :)

  32. Avaris says:

    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

  33. 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.

  34. Feylamia says:

    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. :)

  35. Ghalidrim says:

    Brilliant idea, and glad to see it released.

  36. Shamus says:

    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.

  37. Shamus says:

    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?

  38. Jacob says:

    This is a really neat idea

  39. Ian says:

    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*

  40. 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.

  41. Tara says:

    Very much awesome!

  42. ScottSM says:

    Good idea hooking to the get_comment_author filter. 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.

  43. 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.

  44. 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.

  45. Kris says:

    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.

  46. Dave says:

    Interesting…

  47. Edhel says:

    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)

  48. OM3G4 says:

    just checkin’ mah wavvy

  49. Loki says:

    just curious

  50. Allan says:

    This sounds like fun.

  51. Allan says:

    Heh, kinda accurate, although in a stereotype sense rather than physical.

  52. Thomas says:

    (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.

  53. scragar says:

    This builds the options page where you can administrate the plugin rather
    than mucking about here in the source code. Which you seem to be doing anyway.

    well excuse me for being curious.

    oh, and you do know you can shorten:
    <?php echo
    all the way down to:
    <?=
    if you want to right?

  54. scragar says:

    oh, you also have a spelling error:

    look at the seed (an ,d5 hash) and use pairs of digits to determine our

    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.

  55. Cineris says:

    I may need to register for Gravatars and use one white pixel now…

  56. wingo says:

    I have to know what I look like

  57. lxs says:

    ‘precede’ for posterity.

    I don’t know why you’re being so self-deprecating in point 4. This is cool software.

  58. Shamus says:

    Edhel: It’s all GPL’d. Help yourself!

  59. Shamus says:

    scragar: Thanks for the heads up. Yes, please help yourself to the source. I hope it’s useful for you. :)

  60. Rob Conley says:

    test of the system

  61. ScottSM says:

    How does the wp-content/cache directory 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 directory wp-content/cache/wavatars and make sure it’s writeable.

  62. Nice. But I am basically amazed at anyone who can write a plugin for WordPress. I cannot even figure how it produces feeds.

  63. d4b3ll3z says:

    yet another meaningless comment to see what special face my email provides.

1 2 3 8

45 Trackbacks

  1. By Ravatar wordpress plugin | GrokCode on February 22, 2008 at 2:04 pm

    [...] Ravatar plugin is based on Shamus Young’s Wavatar plugin which is quite good, but the generated avatars weren’t really what I was looking [...]

  2. [...] finally got around to installing Shamus Young’s Wavatar plugin and getting it to look nice in the comments. The Wavatars are based on your email address you use [...]

  3. By Twenty Sided » Blog Archive » Plugins Used on February 25, 2008 at 12:01 pm

    [...] Wavatars My own plugin for making all those funny little faces you see in the comments. [...]

  4. [...] it’s finally happened. Shamus Young (of DM of the Rings and Wavatars notoriety) has started making the most absurd ranting claims and threats I’ve ever seen: I am [...]

  5. [...] already added system is gravatar site (gravatar.com), mybloglog.com, avatars.pl, and livejournal.com. I integrating Go Avatar with wavatar plugin by shamus young [...]

  6. [...] updated Shamus Young’s Wavatars plugin to the newest version to fix a bug which had cropped up where wavatars weren’t being [...]

  7. By Avatars! | K-Squared Ramblings on April 16, 2008 at 11:02 pm

    [...] Wavatars builds up cartoony faces using geometric shapes. Interestingly, it’s by Shamus Young, author of the screencap-based webcomic DM of the Rings and writer of Chainmail Bikini. [...]

  8. By Claim Theme » nunnone.com on April 20, 2008 at 10:43 pm

    [...] Wavatars – an awesome plugin that creates a unique avatar for each commenter, or uses their gravatar if they have one. Update: 2008-01-05Version 2.0 also includes the Blueprint print stylesheet and some extra jiggerypokery thanks to Footnote Links created by Aaron Gustafson. Update: 2008-01-09Version 2.1 finally fixes the issues with the left margin caption/cite/metadata positioning. Now if the post markup is correct the page will render perfectly on every browser I’ve tested. Update: 2008-04-13Version 2.6 Introduces: [...]

  9. [...] for inspiration we found these three exceptional projects: WP_Identicon, WP-MonsterID, and the Wavatars plugin. We decided to take the truly inspiring work that these projects have done, and internalized those [...]

  10. [...] across this article, which talks about gravatar’s new support for Identicons, MonsterID, and Wavatars. In a nut shell what these projects try to do is uniquely identify users, using information like IP [...]

  11. [...] across this article, which talks about gravatar’s new support for Identicons, MonsterID, and Wavatars. In a nut shell what these projects try to do is uniquely identify users, using information like IP [...]

  12. [...] que já procuravam aderir à idéia dos Identicons: Os projetos WP_Identicon, WP-MonsterID e Wavatars foram automaticamente mesclados ao Gravatar original, o que facilita a inclusão de qualquer um [...]

  13. By Identicons,MonsterID 和 Wavatars on May 4, 2008 at 9:06 am

    [...] 和 Wavatars plugin,如果留言者没有注册 Gravatar [...]

  14. By WP_MonsterID :: Dammit Jim! on May 17, 2008 at 1:56 pm

    [...] Theme edits no longer necessary (doesn’t hurt if you already did edit it) (This and the previous thanks to Shamus’s nice Wavatar plugin) [...]

  15. [...] Wavatar (Generated) [...]

  16. [...] ahora Gravatar ha implementado una nueva función inspirado en 3 grandes plugins; Identicon, Wavatar y Monsterid. En la cual, usando el servicio de Gravatar podras crear un avatar a partir de la [...]

  17. [...] quelli che non avessero ancora il proprio gravatar, il sistema è così sofisticato da costruire un wavatar, ovvero un mostriciattolo generato con un algoritmo a partire dalla vostra mail. Quindi, miei [...]

  18. By One glove down… | Knit With Cat Hair on June 29, 2008 at 6:23 pm

    [...] blurry eyedness.  Sorry.  But please comment.  If only to see what cool little avatar the Wavatars plugin makes [...]

  19. [...] One of the Geeknews articles recently topped 80+ comments and I figured it would be interesting to turn on Gravatars to see what popped up beside the names. However, most of the posts didn’t have Gravatars associated with their e-mail, so I’d either just turn it back off or end up having to add yet another a plug-in to enable autogenerating an avatar for those folks. I was leaning toward’s Shamus’ Wavatars. [...]

  20. By Zomaar… » Gravatar (2) on July 21, 2008 at 5:48 am

    [...] heb besloten om voorlopig eens te testen met wavatar. Andere opties zijn WP_Identicon en [...]

  21. [...] Visit [...]

  22. [...] avatar separately on each site.  If you don’t want to use a Gravatar, you can select the Wavatar, Identicon or MonsterID options.  These are cool ways to convert an email or Internet address into [...]

  23. By Situatii » Gravatar pe blog on August 28, 2008 at 10:53 pm

    [...] set finit de decupaje. MonsterID iti selecteaza imaginea unui “monstru” simpatic. Iar Wavatars e asemanator lui MonsterID, dar vine cu alta selectie de [...]

  24. [...] There will also be an option to change the default Gravatar icon to that of Identicons, MonsterIDs, Wavatars, or your own custom image! The Gravatar system also allows each theme to use a different size of [...]

  25. By New Features at The Random Ramblings of mattfast1 on October 12, 2008 at 10:31 am

    [...] I’ve changed that ‘mystery man’ to Wavatar, which will automatically generate an avatar for you, based on your email address. As an added [...]

  26. [...] default avatar with a more meaningful image? Actually, Gravatar supports Identicons, MonsterID, and Wavatars. You may set your default avatar to use one of them. So, if your reader doesn’t has a [...]

  27. [...] used for 2 different accounts. The horror! If this is what you’re after, consider them groovy Wavatars, Identicons and the MonsterIDs. Say [...]

  28. [...] actually has support for unique default icons, but I find MonsterID and Wavatar to be quite ugly, Identicons are a little boring, and ChauvinistID is not yet a [...]

  29. By Ludus Novus » Blog Archive » New Theme for 2009 on December 28, 2008 at 2:09 am

    [...] based on their e-mail address that should be the same across all blogs using Shamus Young’s Wavatar plugin. If you don’t like the goofy cartoon face, you can always create a Gravatar, and it should be [...]

  30. [...] Wavatars [...]

  31. By Is This Bad For WordPress? | Patrick Says on April 16, 2009 at 11:50 pm

    [...] Wavatar [...]

  32. [...] and that is the little face about which John is asking. Wavatars are designed by Shamus Young at Twenty Sided, and are very clever. Based on the information in the email address you use to comment, [...]

  33. [...] and found out how easy it is to use it to assign an avatar to every user of my sites. I have chosen wavatars as the default avatars, as they are kind of funny, but expect most users will update them with [...]

  34. By On Formatting for the iPhone : Allyn Gibson on October 25, 2009 at 1:09 pm

    [...] under the hood; for commenters without Gravatars, I wanted the WPtouch theme to default to custom Wavatars instead of a faceless [...]

  35. By Que divertidos los Wavatars =A= Aeromental on November 11, 2009 at 5:18 am

    [...] ahora esta usando Wavatars para los comentarios que no tengan un Gravatar personalizado. Los Wavatars son un código que [...]

  36. [...] customize the output. You have the following options: Image Size: s (between 1 and 512) Default: d (wavatar, identicon, monsterids or custom URL) Rating: r (think movie ratings with G – [...]

  37. [...] instead. This is however not to the liking of many and hence to correct this problem step in Wavatar, Identicon, and MonsterID.  Wavatar, Identicon, and MonsterID are all WordPress plugins which [...]

  38. [...] is that they don’t get to see their Gravatar before they post a comment – like the comments section on Shamus Young’s Wavatar [...]

  39. By reCaptcha Fail Whale Gravatar | Debiprasad on August 10, 2010 at 4:07 am

    [...] (WordPress default), blank (seriously, nothing will be displayed there), Gravatar logo, Identicon, Wavatar, MonsterID, or any other image. Identicon, Wavatar, and MonsterID are unique for each email [...]

  40. [...] bilgiyi buradan bulabilirsiniz. 0AKPC_IDS += "7070,";Popularity: unranked [?]  Yazının [...]

  41. By GilesBathgate » Server Migration on October 24, 2010 at 7:19 am

    [...] used phpMyAdmin) also lighttpd rewrite rules triped me up, and I forgot to install php5-gd for my wavatars support. But appart from that the migration was seemless, I am sure no one even noticed. [...]

  42. By Le blog de Loonie » Du nouveau dans mon design ! on January 1, 2011 at 7:46 am

    [...] attribue un avatar à chaque personne, et toujours le même pour cette personne. J’ai trouvé Wavatar, qui attribue un avatar à chacun en se servant de l’adresse e-mail renseignée. Comme il [...]

  43. By menga - avatars, gravatars.. wavatars? on February 15, 2011 at 7:40 am

    [...] It shows whatever image you want by detecting the email address you use when posting a comment. A wavatar is a randomly generated image if you don't have any gravatar previously set. This is a built-in [...]

  44. By Qué divertidos los Wavatars | Aeromental on March 25, 2011 at 12:53 pm

    [...] ahora esta usando Wavatars para los comentarios que no tengan un Gravatar personalizado. Los Wavatars son un código que [...]

  45. [...] Site | Wavatars Download | WordPress [...]