Add custom emoticons to WordPress

3 minutes read

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:

Custom Smilies Plugin

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:
    Modifying $wpsmiliestrans array in wp-includes/functions.php

    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 :)

Facebook Twitter LinkedIn Telegram Whatsapp Pocket

Related Posts:

Since version 4.2 release, WordPress now allows you to add the cool new Emojicons to your posts. In case you don’t know what emojicons are: they are the successor of Emoticons or smilies with more better graphics, and web platforms are quickly adopting them. I...
WordPress functions wp_enqueue_script / wp_register_script and wp_enqueue_style / wp_register_style add additional version info in the end of the JavaScript and CSS files you link (include or add) using these functions. This version info is important to ensure...
WordPress automatically adds its current Version number to the head section of the themes. If you view the source of a WordPress-based website, you may find out the WordPress version it is using. Below given is the meta tag that carries that version informatio...