Codeable info

Everybody Loves Smilies :)

Posted on by in WordPress Tutorials

The title says it all, who doesn’t love those cute little emoticon graphics that show such raw emotion! If you’re smiling, why not shoot up a nice cheeser in your post. If you’re angry, toss in a little red faced guy for your readers to see.

Well we love smilies too, so in the proper spirit this tutorial will be completely dedicated to WordPress emoticons and what you can do with them!

How To Use Smilies

This part of the tutorial is pretty straightforward, as there is only one way to use those cute little smilies!

As long as the option is selected (in the admin settings panel) WordPress will automatically convert the proper glyphs or symbols to smiley images.

:)

The above symbol or glyph will give you the smiling smiley, like this :)!

For a complete list of available smilies and glyphs check out the complete code of the smiley function in the “functions.php” file below.

Turn Off Emoticons

By default WordPress converts all smiley symbols to a proper image like this: :)

It is possible to turn off this feature in WordPress so the emoticon image doesn’t show up and plain text remains in its place. We personally don’t know why you would want to do it, but if you don’t love smilies as much as us go ahead :(.

If you would like to turn off the smiley images so that plain text remains instead navigate to the following WordPress menu:

Navigate to Admin Panel: “Settings” -> “Writing”

Under the section marked “Formatting” there is a check box labeled:

"Convert emoticons like :-) and :-P to graphics on display"

If you want to turn off the emoticon images make sure this box is UNCHECKED.

Change The Default Smiley Images

The default WordPress emoticons are cute, but they are pretty plain. There are a lot of smilies and emoticon glyphs out there to download to spice up your graphical influence.

In this little tweak we are going to swap out the default smiley images for custom graphics (yeah it means you can use your own smilies :)).

By default the smiley images are kept in the “wp-includes/images/smilies” directory.

In order to change the files you just need to swap out the existing images with the new smiley images; however the new images must match exactly in name, and format. It would also be a good idea to keep the new smiley images about the same size as the default images just to keep your post format proper.

If for some reason the step above is a little too difficult, but not more difficult than this next step, you can simply change the proper source file to match the new smiley images.

Navigate to the “wp-includes/” folder in the root WordPress directory and open the “functions.php” file. In the file is a function labeled “smilies_init” with the following code:

if ( !isset( $wpsmiliestrans ) ) {
 $wpsmiliestrans = array(
 ':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',
 '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',
 );

Basically to edit this function you would alter the file name listed after the symbol before it. So for instance, lets say I find the perfect smiley image for the winking smiley graphic but the name doesn’t match what is listed above.

I would simply change the “icon_wink.gif” file to the name of the new file I wish to use (the correct format must always be included as well).

Give the Smilies VIP Treatment

We (I’m referring to smiley lovers around the world) would revel at the chance to give our smilies VIP treatment. Well here it is, a tweak that allows individual styling of smiley graphics and images.

The method for doing so is quite simple, but as always involves editing important WordPress source files (Back up, back up, back up if you haven’t done so already).

Smilies can be given their own style by editing the “style.css” file in the active WordPress themes root directory; more specifically by adding in the following code:

img.wp-smiley {
float: none;
margin:0px;
padding:0px;
border: none;
}

Just custom edit the code above (after adding it in of course) to alter the styling for smiley graphics and images.

All Done With Smilies

Unfortunately our smiley adventure has ended, but at least now you know everything there is to know about WordPress smilies!

So get out there and start showing your emotions(through emoticons), in your blog posts of course…

)
Codeable info

Comments (3)

Comment by Sony says:

If you are lazy and don’t want to find new cool smiles by your self you can use https://github.com/s4wny/Pretty-WP-smilies. I have replaced all default smilies with better ones (except for 3 smilies).

Comment by Alex says:

Can we add a function in functions.php to replace smilies without editing a core WordPress file?

Comment by Hamed says:

Thanks bro i use your trick

Codeable info