Add custom emoticons to WordPress

Everyone on internet knows what smilies or emoticons or emojis are. Smilies basically add emotions and expressions to write-ups. WordPress too, provides a basic set of over 20 emoticons to its users to use on their blogs.

Some of the commonly used WordPress smilies are smile :), tongue :P, laughter :D. To know more about these basic WordPress smileys and their usage, see this document.

Now, what if I want to add my custom emoticons to WordPress, each with a separate text-representation or punctuation marks (eg. :-) for :-))? The rest of this article covers the answer to this question.

Can I add my own smilies to WordPress?

Yes, you can, and it’s not so difficult to accomplish. You may use a plugin to achieve that or may do it manually.

WordPress Plugins to add custom smilies

I haven’t tested this plugin, but have heard from most of the users about it. It’s Custom Smilies plugin and here is a screenshot take from it’s support page:

So, go, install and give the plugin a test shot.

Manually adding custom smilies to WordPress

So, to add new smilies to WordPress without a plugin, all you need is add your custom smilies in WordPress smilies folder (each with a different file name than the existing standard WordPress smilies), and then modify some code to provide our custom smilies a unique text-representation.

Upload your smilies to WordPress smilies folder

• Navigate to the wp-includes folder in your WordPress (you can do this with the help of an FTP client like FileZilla, WinSCP etc.) The wp-includes folder is located in WordPress root.
• Now, in wp-includes folder, go to the images folder, look for the smilies folder in it (that contains all the default smilies that are being used on WordPress). Now upload your new smiley files in this smilies folder. Note: Consider using .gif, .jpg or .png files only for the smilies. Keep the name of your smiley files different from the standard WordPress smilies.

Give your smiley a unique punctuation

Now comes the coding part. No, you don’t have to code anything but to modify the existing code a bit. Lets start.

• In the wp-includes folder, look for the functions.php file, search the smilies_init() function, and spot the array variable $wpsmiliestrans that contains all of our standard WordPress smilies and their textual punctuation (eg. :-) for :)).
• Move to the end of the array on line#2699, and right after the :?: smiley, add your unique smiley punctuation and smiley file name in the same fashion. See the below screenshot for a better overview:
  

  

  Note: Keep the new smiley punctuation text unique and different from the existing standard WordPress smiley punctuations.

Now it’s time to test our newly added smiley, which can be done by simply typing the text punctuation for our new smiley in any of our posts. Hope you found this useful, enjoy :)