{"id":3439,"date":"2014-12-20T18:32:28","date_gmt":"2014-12-20T17:32:28","guid":{"rendered":"http:\/\/planetozh.com\/blog\/?p=3439"},"modified":"2014-12-20T18:40:21","modified_gmt":"2014-12-20T17:40:21","slug":"revisiting-wordpress-smilies-in-a-pure-css-way","status":"publish","type":"post","link":"https:\/\/planetozh.com\/blog\/2014\/12\/revisiting-wordpress-smilies-in-a-pure-css-way\/","title":{"rendered":"Revisiting WordPress smilies in a pure CSS way"},"content":{"rendered":"<p>Last night I was <a href=\"http:\/\/krogsgard.com\/2014\/following-dream\/\">reading something interesting<\/a> then stumbled, in the comments, on a WordPress smiley. Bleeeh. There&#39;s a reason one of the first things I do when I setup a new site is uncheck &quot;Convert emoticons like <tt>:-)<\/tt> and <tt>:-P<\/tt> to graphics on display&quot;: 90&#39;s phpBB&#39;esque blocky gifs are *ugly*.<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">WordPress 4.2 Roadmap Wish: update those ugly smilies that have not changed since, wait for it, EVER (for real)<\/p>\n<p>&mdash; Ozh Richard (@ozh) <a href=\"https:\/\/twitter.com\/ozh\/status\/546055415461863424?ref_src=twsrc%5Etfw\">December 19, 2014<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>In my opinion those smileys are super outdated (they haven&#39;t changed since the very beginning of WordPress which, in internet times, is the equivalent of Pleistocene) and they suck for three reasons:<\/p>\n<ul>\n<li>they&#39;re ugly. Did I already mention that? :)<\/li>\n<li>they&#39;re too old to live on retina screens<\/li>\n<li>it&#39;s very inefficient to load one image for each and every emoticon, as <a href=\"https:\/\/twitter.com\/BoiteAWeb\/status\/546079350291177473\">Julio points out<\/a><\/li>\n<\/ul>\n<p>Over the years a few people have proposed alternatives for core but this is unlikely to happen, as very nicely <a href=\"http:\/\/wptavern.com\/wordpress-smiley-wars-will-core-adopt-new-emoticons\" title=\"Otto does not like new smilies :)\">summed up by WP Tavern<\/a>. You can find several alternative as plugins, like <a href=\"https:\/\/github.com\/avryl\/new-smileys\">New Smileys<\/a>, but they&#39;re just another batch of images.<\/p>\n<p>In the short discussion my tweet sparked, <a href=\"https:\/\/twitter.com\/ScreenFeedFr\">Greg<\/a> pointed me to <a href=\"http:\/\/www.screenfeed.fr\/blog\/i-see-dead-people-02184\/comment-page-1\/#comment-1795\">his way of doing it<\/a> and I thought it was <strong>wonderful<\/strong>: 100% CSS, no image loaded, ideally tuned and adapted for his theme.<\/p>\n<p>https:\/\/twitter.com\/ScreenFeedFr\/status\/546148719092314113<\/p>\n<p>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: <a href=\"https:\/\/github.com\/ozh\/ozh-css-smilies\">Ozh&#39; CSS Smilies<\/a>. Hooo those super <del datetime=\"2014-12-20T16:21:56+00:00\">annoying<\/del> cute animated little ghosts!<\/p>\n<p><a href=\"https:\/\/github.com\/ozh\/ozh-css-smilies\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/planetozh.com\/blog\/wp-content\/uploads\/2014\/12\/ghosts_smiley.gif\" alt=\"ghosts_smiley\" width=\"523\" height=\"352\" class=\"aligncenter size-full wp-image-3448\" \/><\/a><\/p>\n<p>The plugin is just meant to be a start for those who&#39;ll want to style their own smilies. Feel free to use and modify to match your theme!<\/p>\n<p><small>* yeah right. I took me like 90 minutes just to get that half ugly CSS working :\/<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last night I was reading something interesting then stumbled, in the comments, on a WordPress smiley. Bleeeh. There&#39;s a reason one of the first things I do when I setup a new site is uncheck &quot;Convert emoticons like :-) and :-P to graphics on display&quot;: 90&#39;s phpBB&#39;esque blocky gifs are *ugly*. WordPress 4.2 Roadmap Wish: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[85,405,245],"class_list":["post-3439","post","type-post","status-publish","format-standard","hentry","category-published","tag-plugins","tag-smiley","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/3439","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/comments?post=3439"}],"version-history":[{"count":9,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/3439\/revisions"}],"predecessor-version":[{"id":3450,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/3439\/revisions\/3450"}],"wp:attachment":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/media?parent=3439"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/categories?post=3439"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/tags?post=3439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}