How to Customize the WordPress Emoticons

Customize the WordPress emoticons. One simple, tiny bit of code, custom smiley images, and you're in business!

Hello Ashley,

Is there any way to replace the automatic WordPress emoticons (eg. if you type in :), it automatically translates to a smiley) with customized ones? Thanks!

Cecilia

Hi Cecilia!

It’s actually quite easy to customize your smilies in WordPress. All it takes is a small snippet of code and some custom images.

The smiley URL filter

Here’s the exact bit of code we want to use:

function my_custom_smilies_src( $img_src, $img, $siteurl ) {
    return $siteurl . '/wp-content/images/smilies/' . $img;
}

add_filter( 'smilies_src', 'my_custom_smilies_src', 1, 10 );

This changes the path to the smiley directory on your site.

This bit of code assumes that your new smilies will be located in your /wp-content/images/smilies/ folder. But you can change that path to whatever you want if you want to put the smilies somewhere else.

Here’s an example using a custom theme and a smilies folder inside that theme:

return get_stylesheet_directory_uri() . '/smilies/' . $img;

You would have to create a new folder in your theme directory called smilies and put all your smilies in there.

Naming your smilies

Your smilies have to have the EXACT same names as the original. You can reference the smiley chart on WordPress.org. Just click on each smiley and you’ll see the URL in the address bar. For example:

https://codex.wordpress.org/File:icon_smile.gif

The file name for that smiley is icon_smile.gif

You can use my custom plugin!

Using custom smiley images in WordPress

I created a suuuuper simple WordPress plugin you can use. All you have to do is download the zip file, unzip it, paste your smilies inside the smilies folder, then re-zip the main ng-custom-smilies folder into a zip file, and upload it into WordPress like a normal plugin. Easy!

I also included just a few sample icons you can use straight away. The icons in the plugin were created by creativesplash on DeviantArt.

Other plugins on WordPress.org

I’m sure there are TONS of other plugins on WordPress.org that would allow you to upload custom smilies with a pretty, user-friendly graphical interface. But honestly the code is so small and simple, that I think it’s best to just create it yourself. 🙂

What do you think about customizing the smilies in WordPress?

Photo of Ashley
I'm a 27 year old California girl living in England (I fell in love with a Brit!). I like to inject a little #girlpower into the WordPress development community by teaching women how to be coding badasses. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

Leave a Reply

(Enter your URL then click here to include a link to one of your blog posts.)

This site uses Akismet to reduce spam. Learn how your comment data is processed.

18 comments

    1. You can use it on Book Host, you’d just need to set up the plugin how you want it (download the file and add the emoticons you want), then send it to me so I can install it for you. 🙂

  1. I tried putting the functions part in my theme, added my smilies to my folder but it did not work… maybe because WP was updated? I put smile icon and I get this image instead https:// s.w.org/images/core/emoji/2.3/svg/1f642.svg

    1. myuption, I’m attempting to do this as well, but found that Chrome and Safari don’t seem to obey the php code. It seems to work fine in Firefox, but sadly Firefox is trending down as a browser.

      I’m going to try the plugin (instead of placing php code in functions.php) and see if that helps… I’ll post back

    2. Well it doesn’t seem to matter… it appears as though WP has gone with an SVG set of emojis (and is calling them emojis now instead of smilies), and any emojis you use with this plugin or functions.php code are relegated to “alt” status.

      Firefox has always been wary of svg (since malicious code could theoretically be embedded), so I’m guessing their browser avoids the svg and uses the alt (gif, png, etc). Sadly, all the svg (vector) emojis I’ve seen are pretty lame.

      Not sure what can be done… if anyone has a solution please post!

    3. I think I may have found what’s going on (and it has nothing to do with sinister svg files :). More importantly, I think I may have found a potential solution. Apparently, WP has implemented a javascript-based substitute for emojis that feed directly from a CDN system they maintain. They did this to give a bit of standardization across platforms and browsers, since the constantly evolving emoji scene has been a bit of a mess.

      So the vector file you’re seeing upload in place of your chosen emoji is a relatively new substitution system for the old WP emojis. The old ones were truly crappy (unless of course you prefer the charm of ’80s pixel art). The new ones are better I suppose, but still inelegant in my opinion – svg art is typically limited to flat shapes of color. Plus any weight/speed gains in using a vector format are probably outweighed by the remote server setup. So I have to say the new system is probably a well-intentioned misstep because it keeps you from modifying the images yourself and it can actually slow your site according to some critics. It’s also a poorly-timed solution, as it seems to have arrived just as the world is finally sorting things out a bit (emoji-wise, anyway :). Fortunately you can turn the new system off using the plugin or php code found here:

      http://www.jeriffcheng.com/disable-emojis-in-wordpress-4-2-and-above-for-better-performance.html

      When I did this, the old “alt” system took over and all the emojis I set up according to Ashley’s instructions are now working great on all browsers. For some very nice hi-rez emoji files, you can go to the following site:

      https://emojiisland.com/pages/free-download-emoji-icons-png

      and downloaded their free hi-rez png files (best to use right-click on the download link and ‘Save As…’ to preserve the png transparency). You can then bring them into Photoshop and re-save as either GIF (they seem fine with 64 colors) or 8-bit PNG, whichever the original file was. Incidentally, use “Save for Web & Devices” in Photoshop… it strips out all unnecessary metadata, icons, etc., that can increase file sizes.

      It took me awhile to save all the files properly, but I think it’s worth it; nothing says “truck-pulling enthusiast site” like crappy 8-bit emojis (of course, if you’re building a truck-pulling enthusiast site then you now have the ability to customize your emojis with beer and hats and cool stuff… lessee…. what was the key combo for that eye-roll emoji again?).

      Hope it’s helpful!

Recent Posts

    Random Posts