Emoji are the ideograms or smileys 1f604.png used in electronic messages and Web pages. Originating in Japan on mobile devices, they are now commonly available on devices worldwide, ranging from mobile to desktop computers.

Different operating systems have distinct methods of accessing emoji. Note that these methods work in most applications, not just WordPress.

Emoji are not Smileys

Not quite. Emoji are a newer development than smileys (a.k.a. emoticons). They are created differently, and handled differently by operating systems and web browsers. For more information about smileys, please see the Using Smileys page.

Using Emoji on Mobile

iOS (iPhones, iPads, etc. running iOS 5 and higher)

Follow these instructions to turn the Emoji keyboard on (as of iOS 8 it is enabled by default):

  1. Go into the Settings app
  2. Select "General"
  3. Select "Keyboards"
  4. Tap the Keyboard button, then "Add New Keyboard"
  5. Scroll down and select "Emoji"

After you've done this, you will now see a small "smiley face" icon to the left of the space bar when typing. (If you have multiple keyboards enabled, you may see a globe icon instead.) Tap on this to switch to the Emoji keyboard.

Android

There is a smiley face button in the lower right corner of the keyboard. Tap this to access emoji.

AndroidKeyboard.jpeg

In some apps, you may need to tap and hold the Enter button for the smiley face button to appear.

AndroidKeyboard2.jpeg

Using Emoji on Desktops

Windows 10

  1. In Desktop mode, right-click the Taskbar
  2. Click to check the option that says "Show touch keyboard button"

A new icon will appear in the taskbar (lower right hand corner of the screen near the time) that looks like a keyboard. Click the keyboard icon to open the onscreen keyboard, you can then click the smiley face to open the emojis.

Windows 8

To access emoji in Windows, you have to perform a one-time setup first.

  1. In Desktop mode, right-click the Taskbar
  2. Select "Toolbars"
  3. Select "Touch Keyboard"

A new icon will appear in the System Tray (lower right corner of your screen) that looks like a keyboard.

After that, when you want to type an emoji, just click on that icon and an onscreen keyboard will appear. Click the smiley face next to the space bar, and the alphanumeric keyboard will change to an emoji keyboard.

Mac OS X (10.7 or higher)

  1. Click the Edit menu
  2. Select "Special Characters"
  3. A small popup keyboard will appear allowing access to emoji and many other special characters.

You can also access this popup by pressing ?-control-space.

Linux

The Symbola font enables emoji display under Linux applications. Installing this font depends on your distribution.

Arch Linux

It's found in the ttf-symbola package under Arch Linux and its derivatives. Installing it is a one-shot command :

sudo pacman -S ttf-symbola

Debian

You need to install it manually under Debian :

  1. Create a custom fonts dir and go into it : mkdir ~/.fonts && cd ~/.fonts
  2. Download Symbola.ttf from a font site (many links possible) using wget; eventually uncompress it if delivered as a ZIP our gzipped file.
  3. Let the magic begin !

Fedora

It's available in the yum repositories, again one commandline from using it :

sudo yum install gdouros-symbola-fonts

Converting to images

For backwards compatibility there are wp-emoji.js and twemoji.js JavaScript files being used. They will convert the often greyscale Emoji characters to colored image files.

If you are a developer working on forms, you might want to disable this behaviour in your input fields and textareas. You can use the class attribute with 'wp-exclude-emoji' for this.

Common Emoji

Beyond the standard emoticon-type "smileys", (e.g. ? or ?) there are hundreds of emoji, ranging from plants and animals (?, ?, ?) to people (?, ?), objects (?, ?), vehicles (?), food (?), the Sun and Moon, and more.

 

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. smile emoticon

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

;-) is equivalent to smile emoticon
:-) is equivalent to smile emoticon
:-( is equivalent to sad emoticon
:-? is equivalent to confused emoticon

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.

How Does WordPress Handle Smileys?

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

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.

What Text Do I Type to Make Smileys?

Smiley images and the text used to produce them*:

icon text text full text icon full text
smile :) :-) :smile: lol :lol:
biggrin :D :-D :grin: redface :oops:
sad :( :-( :sad: cry :cry:
surprised :o :-o :eek: evil :evil:
eek 8O 8-O :shock: twisted :twisted:
confused :? :-? :???: rolleyes :roll:
cool 8) 8-) :cool: exclaim :!:
mad :x :-x :mad: question :?:
razz :P :-P :razz: idea :idea:
neutral :| :-| :neutral: arrow :arrow:
wink ;) ;-) :wink: mrgreen :mrgreen:

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

Troubleshooting Smileys

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.

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. redface emoticon

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

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'. eek emoticon

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

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.

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.

More Information on Smileys