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 4 8

  1. Davesnot says:

    @Xbolt,

    Nope.

  2. niall says:

    Can’t resist…

  3. NobleBear says:

    @ Luke Maciak: Thank you very much :D

    After doing some other things then reexamining the info I put in, I found that I had switched two of the letters in my email address when posting here. After headdesking a couple of times I got it fixed. It works just fine now.

    Thanks again!

    @Shamus: Thanks for all you time and effort to set up avatars on your site. :D

  4. NobleBear says:

    @ Shamus (again)

    I just noticed that I could switch to a black background here, Thank You very much for this feature as well. I personally find it easier to help me focus and find it less jarring on my eyes.

  5. DocTwisted says:

    Oh oh, I just gotta see what mine looks like! <.<;

  6. Bonnie says:

    I’m such a follower. I hope mine is cute . . .

  7. Feylamia says:

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

    That’d be nice for a lot of people, I think. :)

    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.

    Oh? I just changed the line (338)
    $url = "http://www.gravatar.com/avatar.php?gravatar_id=$md5&;rating=$rating&;size=60&;default=$url";
    to
    $url = "http://www.gravatar.com/avatar.php?gravatar_id=$md5&rating=$rating&size=60&default=$url";

    and it works fine in my blog. :)

    What “-tag” isn’t closed?

    D’oh – wordpress deletes and the likes and I forgot to use [code]. I was talking about the image-tag, the one in line 343. :)

  8. Feylamia says:

    Meh, wordpress deleted my nice “& amp ;” in the [code]. So just pretent that that second line is using the correct escape string for the ampersand. :D

  9. lebkin says:

    Normally, random “test” posts are annoying. But since everyone’s images are unique, I am enjoying seeing everyone else’s. A wonderfully interesting creation.

  10. Ralff says:

    Wow, this is actually pretty cool.

    Mostly just posting right here so I can see my face, though.

  11. Len says:

    Thanks for a great and fun plug-in. One of my favorites!

  12. Turbosloth says:

    heh… ironicially enough i’m a really long time reader (since about the 3rd DMoTR, but a chronic lurker… never posted a comment before… but now i cant resist, i wanna see what face i get!

  13. Turbosloth says:

    … damn thats ugly…

  14. xbolt says:

    @Davesnot:

    Really? You have nothing better to do than waste time reading a repetitive comment that serves absolutely no purpose other than to waste time by reading a comment that is entirely random and useless?

    And even now, this comment is shaping up to be another random comment that comments about how random the random comment is.

    However, I will foil this evil plot to waste time, by saying something that may actually have something to do with Wavatars.

    I like mine. :D

  15. Turgid Bolk says:

    What can I say, I’m a fan. :D

  16. Rason says:

    Nice Shamus

  17. P'kay says:

    This is sweet. Thankyou for making the internet that little bit more awesome.

  18. Han says:

    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.

    That’s a lot! But while they’re strictly unique, are they functionally unique? For example, just in this comment thread, Uninverted’s wavatar looks very similar to Avaris’s. Note that this isn’t a complaint, by any means – I think this is a great idea! I’m just wondering how many distinct wavatars, in terms of how we perceive them, there actually are.

  19. Greg says:

    What do I look like. Is it good?
    I wonder if you’ll see more comments from people whose emails generate cool pics and less from those who don’t :P

  20. Greg says:

    On a vaguely paranoid note (which isn’t at all a premise to test another email address) is it possible to work backwards from the code and know what someones email is from their pic?

  21. Plasma says:

    I’d like to point out that it isn’t under most circumstances really necessary to comment anew in order to see your wavatar: you can look at a previous comment you’ve made, as they seem to be back-thingied. To wit, I seem to be a square. With glasses. Fits me perfectly. I guess.

  22. red says:

    How do I look?

  23. ScottSM says:

    @Greg
    The email is put through a MD5 hash which in itself is very hard (pretty near impossible) to unencrypt (people have figured out how to generate a hash the same as a given md5 but not how to go backwards from one). Also Shamus is only showing half the hash so that should make it pretty much impossible to determine an email from a Wavatar short of brute force creating Wavatars from known or randomly generated email addresses and comparing (very unlikely).

  24. Gary says:

    This is a beautiful little plugin Shamus! Very cool!…..Now I just need a blog to put it on…..

  25. Very cool! I will be adding this to my site :)

  26. Shamus says:

    Greg: It’s not possible to recover an email from the name of the image, as the image is named using PART of the md5 hash. The first 17 digits are retained, the rest is thrown away.

  27. Heather says:

    Again, loving the wavatars Shamus. Another site I frequent (Rich’s ComixBlog, with far and away the best fan-produced Doctor Who comic I’ve ever seen), has just installed the wavatars, so I’m geeky girl with glasses and an evil grin on two sites now. :) How appropriate.

  28. Elethiomel says:

    This will be interesting to see. Apologies for yet another meaningless post.

  29. Yeroc says:

    Hmm..wonder what I’ll get?

    Very nice work Shamus.

  30. Adam says:

    There’s some garbage in your readme.txt that’s causing weird stuff to show up in your listing at wp.org.

    Cool idea. Much better than the default image I currently use for my gravatars. Time to play…

  31. Adam says:

    One suggestion. Function wavatar_show() should return, not echo, the wavatar, especially given the syntax in wavatar_comment_author(). Maybe there could be an optional argument that I pass to wavatar_show() to set whether it returns or echoes.

    I’ll make the change locally, but others might also appreciate having that built in.

  32. Missingno. says:

    checking

  33. Adam says:

    I’m done tinkering. Here’s my suggested change to wavatar_show(). (If you’re wondering why I’m doing this–I use my gravatars/wavatars in a CSS background image for each comment, produced by a function in my theme’s functions.php, so I need to grab only the wavatar URL to use it as the gravatar default).

    Here’s hoping the code pastes well:

    function wavatar_show ($email, $size='', $return=false, $urlonly=false) // adam's hack: add $urlonly and $return argument
    {

    $email = strtolower ($email);
    $md5 = md5($email);
    $seed = substr ($md5, 0, 17);
    $border = get_option('wavatar_border');
    $rating = get_option ('wavatar_rating');
    if ($size == '')
    $size = get_option ("wavatar_size");
    if ($size == 0)
    $size = AVATAR_SIZE;
    //make sure the image functions are available before trying to make wavatars
    if (function_exists (imagecreatetruecolor)) {
    //make sure the cache directory is available
    $localdir = "wp-content/cache/wavatars";
    if (!file_exists ($localdir) && !wp_mkdir_p ($localdir))
    return;
    $dest = $localdir . "/$seed.png";
    $url = get_bloginfo ('siteurl') . '/' . $dest;
    if (!file_exists ($dest))
    wavatar_build ($seed, $dest, $size);
    } else //image functions not available
    $url == '';
    if (get_option ('wavatar_gravatars'))
    $url = "http://www.gravatar.com/avatar.php?gravatar_id=$md5&;rating=$rating&;size=60&;default=$url";
    //if we don't have image functions AND gravatars are off, then there is nothing to do.

    if ($url == '')
    return;
    if ($urlonly)
    return $url;
    $out = get_option('wavatar_prefix');
    $out .= "<img class='wavatar' border='$border' src='$url' width='$size' height='$size'>";
    $out .= get_option('wavatar_suffix');
    if ($return)
    return $out;
    echo $out;
    }

  34. Eric the Baker says:

    I’ve been trying to resist for a day, I can’t anymore… This is my first post here, and it’s for this…ohhh the shame! Love the site.

  35. Shamus says:

    adam: Next revision I’ll add a function: wavatar_get (), which will create the wavatar and then just return the URL o the image.

  36. Adam says:

    Thanks. Sorry my code pasted so horribly. This is an awesome plugin.

  37. Germelia says:

    Can’t resist trying out my university e-mail too <.<

  38. kamagurka says:

    Awesomeness.

  39. Alex B. says:

    Wavatar test.

  40. Alex B. says:

    It looks just like me…

  41. Shishberg says:

    Well now look what you’ve done. You’ve forced me to finally get around to throwing out my hacky homebrew blog software and switch to WordPress just so I could use wavatars.

    Thanks Shamus. Thanks a lot.

    (That last line is a rare example of double sarcasm.)

  42. Rick says:

    OK, I gotta see what I get.

  43. Rick says:

    Current game of choice: CastlevaniaL SOTN on the PSP.
    And I get a wavvy is a vampire… how did it know?

  44. Estelyn says:

    What a fun toy! You know, I bet you thought this up just to get even more comments than you already do…

  45. bushtool says:

    Your plugin is great but my site has some issues that I can’t seem to figure out. If I use the automatic display option, the wavatar/gravatar seems to appear correctly but it breaks my comments rss saying something like there is an unidentified tag in the “title” section of the feed. Also I have a “recent comments” sidebar widget that now shows the same wavatar graphic next to every comment listing.

    If I manually add the code ,, to my comments.php and turn off the automatic flag, the comments rss feed validates fine. However the wavatar that shows up is the same for every comment regardless of the email address for the comment.

    Thanks for any help you can give me.

  46. Shamus says:

    bushtool:

    It’s hard to know what the problem is from here, but give this a try:

    wavatar_show ($comment->comment_author_email);

    Let me know how that works for you.

  47. bushtool says:

    That fixed the problem, that you VERY VERY much. This plugin is great. Now my visitors will have a great picture whether they want one or not!

  48. Tyler says:

    This is an extremely neat idea! I’m digging it… Too bad I have a Gravatar already… :(

    About the colour schemes, though. I think it’d be neat if the site that prompted the creation of one’s unique Wavatar forced a specific colour hue or theme. Then a person could almost guess what site that person frequents… or whatever…. I don’t know… Thought-provoking nonetheless.

    Thanks!

  49. Shishberg says:

    Hmm. What would it take to get a commenter’s smileys to look like the wavatar, but with a different mouth & maybe eyes?

    So this :( would be my purple guy but with a frowning mouth instead of the straight one with the tooth, and this ;) would be the same but with a smiling mouth and one winking eye.

    Yeah. I know that’s a gazillion times more work than it’s worth. Never mind.

  50. Fernando says:

    It looks great, it’s a nice feature for a blog. Thanks ;)

  51. Dev Null says:

    Ya know what this plugin needs Shamus? A special page (well, just a special thread you could link to, maybe with the Gravatars turned off) where everyone can go to see what their Wavatar would look like, without them having to fill up the comments of any other threads…

  52. Shishberg says:

    Dev Null: But that’s the best bit! ;)

  53. I get the following error when I try to activate this plugin.

    Fatal error: Call to undefined function wp_get_current_user() in /home/content/r/g/b/rgblack/html/wordpress/wp-includes/capabilities.php on line 446

  54. Josiah says:

    Just checkin’ it out. Test Testy McTest from Testville, Testonia.

  55. Xed says:

    Very nice… of course, I also want to see what mine looks like :-)

  56. Johan says:

    Just wanna see what mine looks like.

  57. Johan says:

    And with my other email…

  58. What an interesting plugin! I’ve been on the lookout for a good Gravatar plugin, but this one looks to have that extra little oomph to make it that much more interesting (and geeky, which is a big plus in my book!). Great job!

  59. CJG says:

    I too am curious what my wavatar looks like.

  60. Palette says:

    Jumping on the bandwagon to see what my Wavvy is.

    Shamus, can this be used on Blogger? Or is it WordPress only?

1 2 3 4 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 [...]