Revisiting WordPress smilies in a pure CSS way « planetOzh

Last night I was reading something interesting then stumbled, in the comments, on a WordPress smiley. Bleeeh. There's a reason one of the first things I do when I setup a new site is uncheck "Convert emoticons like :-) and :-P to graphics on display": 90's phpBB'esque blocky gifs are *ugly*.

WordPress 4.2 Roadmap Wish: update those ugly smilies that have not changed since, wait for it, EVER (for real)

— Ozh Richard (@ozh) December 19, 2014

In my opinion those smileys are super outdated (they haven't changed since the very beginning of WordPress which, in internet times, is the equivalent of Pleistocene) and they suck for three reasons:

• they're ugly. Did I already mention that? :)
• they're too old to live on retina screens
• it's very inefficient to load one image for each and every emoticon, as Julio points out

Over the years a few people have proposed alternatives for core but this is unlikely to happen, as very nicely summed up by WP Tavern. You can find several alternative as plugins, like New Smileys, but they're just another batch of images.

In the short discussion my tweet sparked, Greg pointed me to his way of doing it and I thought it was wonderful: 100% CSS, no image loaded, ideally tuned and adapted for his theme.

https://twitter.com/ScreenFeedFr/status/546148719092314113

A coffee break later*, here is a sample plugin that replaces your smilies with pure and simple HTML markup that you can then easily style: Ozh' CSS Smilies. Hooo those super annoying cute animated little ghosts!

The plugin is just meant to be a start for those who'll want to style their own smilies. Feel free to use and modify to match your theme!

* yeah right. I took me like 90 minutes just to get that half ugly CSS working :/