How To Add Your Own Custom Smileys To WordPress

How To Add Your Own Custom Smileys To WordPress

WordPress comes with its own default smileys (emoticons). The good news is that, you can add yours to the  existing ones. For some reasons, if you think the default ones don’t add up to your strong taste for emoticons, this tutorial will guide you to add your own custom smileys.

Adding custom emoticons to WordPress is not rocket science. It’s much easier than you imagined and any beginner can do it, just follow the following instructions.icon_come2

Before we start, the first thing to do is to get your smileys ready. I’m assuming that you’ve done this already but in case you haven’t, simply search online for some ‘free smiley/emoticon packages’.

Adding your custom smileys to WordPress directory

danceFirst, give your smileys special names.  In this example, I’ve named it icon_dance.

Upload all the smileys to this directory;  /wp-includes/images/smilies.

How do i do this? You need to log-in to your server to locate this folder. For the sake of the beginners, let me break it down. I’m going to use hostgator’s c-panel for this example.

Under ‘Files’ locate File Manager →Web Root to …/public_html/wp-includes/images/smilies  This is the folder where WordPress keeps the smileys.

You should see the default WP smileys in this folder. Simply upload your emoticons to this folder.


Writing Your Custom Code

Now, we need to write the code that will make the emoticons appear. Open Notepad/MS word from your computer. Copy and paste this code into the notepad, note that this is just an example to guide you write your own codes.  You have to change the parameters depending on the file name you chose.

‘:dance:’ => ‘icon_dance.gif’,

The code ‘:dance:’ fetches the emoticon with the file name  icon_dance.gif from the server anytime someone types :dance: (You got the trick now, right?).icon_danban2

Copy and paste the code into the following directory;

From the C-panel, Under ‘Files’ locate File Manager…/public_html/wp-includes/functions.php (Click here to see image)

 Right-click on functions.php and go to edit. Look for function smilies_init()

You will find the custom WordPress smiley codes here. Simply add your code to it and save changes.

Add Your Own Custom Smileys

You can try the short code you choose (in this example, i used :dance: )in your comment box/posts to if the magic worked.

Summary of this post

  1. Upload the custom smileys to …/public_html/wp-includes/images/smilies
  2. Add your custom code to …/public_html/wp-includes/functions.php

Code formula=  ‘(any short code you like)’ => ‘(file name of smiley)’,

Example= ‘:dance:’ => ‘icon_dance.gif’,

Few things to Note

  • The short code doesn’t necessarily need to have the same name as the file name. In this example, i used the code,  ‘:dance:’ => ‘icon_dance.gif’,

i can change :dance: to something like 888; so that it becomes,

‘888;’ => ‘icon_dance.gif’, In this case anytime someone types 888; the emoticon will appear.

You can choose to include punctuations and numbers in the code and everything should work fine.

  • To tell you the truth,  i haven’t really added the dance smiley used in this example to my WordPress smiley folder, (all emoticons on this page were uploaded directly like any other media).

Which means if you type :dance: into the comment box below, that banana dude will not appear. icon_nono2icon_danban2


Leave a Reply

Your email address will not be published.