Using Smilies

You are here:

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.

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
🙂:):-):smile:😆:lol:
😀:D:-D:grin:😳:oops:
🙁:(:-(:sad:😥:cry:
😮:o:-o:eek:👿:evil:
😯8O8-O:shock:😈:twisted:
😕:?:-?:???:🙄:roll:
😎8)8-):cool:❗:!:
😡:x:-x:mad:❓:?:
😛:P:-P:razz:💡:idea:
😐:|:-|:neutral:➡:arrow:
😉;);-):wink::mrgreen::mrgreen:

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

1
2
3
4
5
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 http://example.com/wp-includes/images/smilies/icon_question.gif with http://example.com/wp-content/images/smilies/icon_question.gif

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:

1
2
3
.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:

1
2
3
img.wp-smiley {
        float: none;
}

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

Top ↑

More Information on Smileys 

  • Wikipedia – Emoticon
Was this article helpful?
Dislike 0
Views: 3

Cart

Log in

Create an Account
Back to Top