Edit smileys in WordPress (Javascript comment section)

smileys in wordpress

So you’d like to edit the ugly smiley text in wordpress like : eek: or : razz: or : biggrin: (I have to let some space between : and the smiley text) to real symbolic smileys like : P, : D, : * (again I have to let space so wordpress doesn’t convert the emoticons)? Most plugins seem outdated, Here I am going to show you ..

HowTo Edit smileys in WordPress

In the folder “wp-includes” on your webserver you have the functions.php where you can edit and change the smileys in your WordPress blog.

There you are able to find a snippet like that:

':mrgreen:' => 'icon_mrgreen.gif',
		':neutral:' => 'icon_neutral.gif',
		':twisted:' => 'icon_twisted.gif',
		  ':arrow:' => 'icon_arrow.gif',
		  ':shock:' => 'icon_eek.gif',
		  ':smile:' => 'icon_smile.gif',
		    ':???:' => 'icon_confused.gif',
		   ':cool:' => 'icon_cool.gif',
		   ':evil:' => 'icon_evil.gif',
		   ':grin:' => 'icon_biggrin.gif',
		   ':idea:' => 'icon_idea.gif',
		   ':oops:' => 'icon_redface.gif',
		   ':razz:' => 'icon_razz.gif',
		   ':roll:' => 'icon_rolleyes.gif',
		   ':wink:' => 'icon_wink.gif',
		    ':cry:' => 'icon_cry.gif',
		    ':eek:' => 'icon_surprised.gif',
		    ':lol:' => 'icon_lol.gif',
		    ':mad:' => 'icon_mad.gif',
		    ':sad:' => 'icon_sad.gif',
		      '8-)' => 'icon_cool.gif',
		      '8-O' => 'icon_eek.gif',
		      ':-(' => 'icon_sad.gif',
		      ':-)' => 'icon_smile.gif',
		      ':-?' => 'icon_confused.gif',
		      ':-D' => 'icon_biggrin.gif',
		      ':-P' => 'icon_razz.gif',
		      ':-o' => 'icon_surprised.gif',
		      ':-x' => 'icon_mad.gif',
		      ':/' => 'icon_neutral.gif',
		      ';-)' => 'icon_wink.gif',
		// This one transformation breaks regular text with frequency.
		//     '8)' => 'icon_cool.gif',
		       '8O' => 'icon_eek.gif',
		       ':(' => 'icon_sad.gif',
		       ':)' => 'icon_smile.gif',
		       ':?' => 'icon_confused.gif',
		       ':D' => 'icon_biggrin.gif',
		       ':P' => 'icon_razz.gif',
		       ':O' => 'icon_surprised.gif',
		       ':x' => 'icon_mad.gif',
		       ':|' => 'icon_neutral.gif',
		       ';)' => 'icon_wink.gif',
		      ':!:' => 'icon_exclaim.gif',
		      ':?:' => 'icon_question.gif',
		      ':*' => 'icon_lol.gif',
		      ":'(" => 'icon_cry.gif',

Note: This is what WordPress is gonna search for in your text to replace with the emoticon image given next to the symbol!
So of course you gonna edit that as you want it in the end. For example you take a copy of one line like ‘8)’ => ‘icon_cool.gif’, and put it in the end after the last line you can find in your functions.php. Then you edit the symbol which be found in the texts you write and the image it’s linked to.

The images itself can be found in the folder wp-includes/images/smilies btw., if you want to replace or add new ones.

Upload the functions.php back on your webserver and replace the one you can find there. Don’t forget to backup everything you change in beforehand.

Now you will be able to use your new emoticon. But there’s a little smiley section above the comments box, what about that?

To edit that, you go to your WordPress Dashboard and then to Appearance -> Editor from there you choose comments.php on the right and search there for the smiley javascript codes to edit, to change the emoticon codes in the comment section.

Have fun editing your smileys! :*

Leave a Comment