Using Smilies

What Are Smileys?

Smileys, also known as “emoticons”, are glyphs used to convey emotions in your writing. They are a great way to brighten up posts. 🙂

Text smileys are created by typing two or more punctuation marks. Some examples are:

;-) is equivalent to 😉

:-) is equivalent to 🙂

:-( is equivalent to 🙁

:-? is equivalent to 😕

To learn more about emoticons and their history, see the Wikipedia entry on Emoticons.

Top ↑

Smileys are not Emoji

Although smileys and emoji can both display smiley faces and such, emoji are a newer development and have a much wider range of images that can be displayed. (They are also created differently.) For more information on emoji and how to use them, see the Emoji page.

Top ↑

How Does WordPress Handle Smileys?

By default, WordPress automatically converts text smileys to graphic images. When you type ;-) in your post you see 😉 when you preview or publish your post.

Top ↑

To Turn off Graphic Smileys

As of WordPress 4.3, the option to disable graphic smileys was removed from new installs. There is a plugin if you want to retain the option.

Top ↑

What Text Do I Type to Make Smileys?

Smiley images and the text used to produce them*:

icontexttextfull texticonfull text

* In some instances, multiple text options are available to display the same smiley.

Category:Getting Started

Top ↑

Troubleshooting Smileys

Top ↑

Why Doesn’t it Work?

Smileys may have been disabled by your WordPress admin. Another possibility is the smiley image files have been deleted from /wp-includes/images/smilies.

Top ↑

Why Doesn’t it Work for Me?

If smileys work for others at your site but not for you:

Type a space before and after your smiley text. That prevents the smiley being accidentally included in the text around it. 😳

Make sure not to use quotes or other punctuation marks before and after the smiley text. 🙄

Top ↑

Where Are My Smiley Images Kept?

The smiley or emoticon image graphics are found in the /wp-includes/images/smilies directory.

Note that smileys is spelled ‘eys’ in this documentation and the directory name for the smiley images is ‘smilies, spelled ‘ies’. 😯

Top ↑

How Can I Have Different Smiley Images Appear?

The easiest way is to filter the smilies.

Upload the images you want with the same name to your server (say in wp-content/images/smilies) and put this in your theme’s function.php:

add_filter( 'smilies_src', 'my_custom_smilies_src', 10, 3 );
function my_custom_smilies_src( $img_src, $img, $siteurl )
        return $siteurl.'/wp-content/images/smilies/'.$img;

That will replace with

Top ↑

Why are my Smiley Images Blank?

If you recently uploaded the images, it could be that the images have been uploaded in ASCII format by your FTP program. Re-upload the smileys ensuring that they are transferred in BINARY format.

Some FTP programs have an auto-detect setting which will upload files in the correct format without user intervention. If you have such a setting, turn it on.

Top ↑

Smiley CSS

The smiley images in WordPress are automatically given a CSS class of wp-smiley when they are displayed in a post. You can use this class to style your smileys differently from other post images.

For example, it’s not uncommon to set up images in a post to appear on the left-hand side of the content with text flowing around the image. The CSS for that might look like this:

.post img {
        float: left;

This would typically affect all images in a post, including your smiley images. To override this so that smileys stay inline, you could add this to your CSS:

img.wp-smiley {
        float: none;

For more on CSS in WordPress, you might want to start here.

Top ↑

More Information on Smileys

Was this article helpful? How could it be improved?