How to Insert Emoji in WordPress?

Emoji are the pictographs used in modern day conversations to express emotions instead of writing lengthy words. For example, people use the most popular face with tears of joy emoji ? for expressing happiness filled with fun. The popularity of smartphone make it as a common practice for people to use emoji as shortcuts for many words. Unicode consortium, a non-profit organization, maintains the technical specification for emoji. Applications like WordPress uses this specification and allows users to insert emoji on their website. In this article, let us explore more on how to insert emoji in WordPress websites.

Learn WordPress: Check out 500+ free WordPress tutorials.

WordPress and Emoji

WordPress introduced emoji with the version 4.2. Emoji are similar to text characters that you can insert on WordPress like any other applications. This essentially means the display of the emoji on your WordPress site simply depends on the browser and platform you view.

In addition, WordPress also offers a setting for converting text emoticons to smileys or emoji.

Insert Emoji in WordPress

The good part is that you do not need any additional plugin for inserting emoji in WordPress site. Depending upon the situation, you can use one of the following methods:

• Use the in-built emoji apps in Windows and Mac
• Copy and paste the emoji from your documents or from other online websites
• Use text emoticons to insert simple smileys

In all these methods, make sure you use the latest WordPress versions with Gutenberg block editor. You can insert emoji inside any text area like title, heading, paragraph or list.

1. Inserting Emoji in WordPress in Windows 10 PC

If you are using Windows PC or laptop for building WordPress site the follow the below instructions.

• Place the cursor where you want to insert emoji.
• Press “Win Logo + .” shortcut keys.
• This will open the emoji panel in Windows 10 computer.
• Type the emoji keyword, for example type “pizza” to filter pizza emoji.
• Click on the emoji to insert on your website.
• Finish your content and publish the article.
• View the website in browser to check the emoji.

Remember, emoji panel will work only in Windows 10 and not with earlier Windows versions. Emoji panel will save frequently used emojis so that you can quickly pick your favorite emoji without searching. In addition, you can also insert mathematical operators and Kaomoji symbols using the same emoji panel.

2. Insert Emoji in WordPress in MacBook

Follow the below instructions, if you are using MacBook.

• Place the cursor inside any text block.
• Press “Command + Control + Space” to open Character Viewer app.
• You can make the app small or big by clicking on the symbols icon on the top right corner of the app.
• Type the emoji keyword using the search box.
• Click on the emoji to insert on the article.

Alternatively, with the larger app view, go to “Emoji” section and find the emoji under different categories.

Similar to emoji panel in Windows 10, Character Viewer app also saves the frequently used emoji for quick use.

WordPress SEO: Optimize WordPress site with free WordPress SEO guide.

3. Insert Emoji in WordPress Mobile Apps

If you are using WordPress iOS or Android apps, you can use the default emoji keyboard function to insert emoji. For example, on iPhone, tap on globe icon and choose “Emoji” as your keyboard. Search and insert your emoji from the available list.  

4. Copy Paste Emoji

Whether you use Windows or Mac, the easier and alternate option is to copy and paste the emoji.

• You can copy the emoji from Word, Pages or any other document and paste on the WordPress editor.
• Similarly, copy the emoji from online and paste on your site.

Remember, emoji are text characters that you can copy and paste across platforms and applications. However, the display of the emoji may be different on your site than the source you are copying from. In addition, make sure to paste the text emoji and not the sticker or image.

5. Converting Text Emoticons to Smileys and Emoji

Go to “Settings > Writings” section in your WordPress admin panel. Under the first “Formatting” section, enable the check box against “Convert emoticons like :-) and :-P to graphics on display” option. This will help you to type the text emotions on the editor.

Go to post editor and type the emoticon like in title and other blocks. Publish or preview the article.

As you can see the text emoticons are converted to emoji display on the content area but did not work on the title area. However, directly inserting emoji works perfectly in the title as well in the content area.

Related: Complete list of Kaomoji text emoticons for Windows computer.  

6. Emoji Plugins

There are many emoji plugins available in free WordPress repository. These plugins will insert an icon in the classic editor and a block in Gutenberg editor from which you can pick up your favorite emoji. However, we do not recommend installing additional plugins and use one of the above mentioned methods instead.

Emoji Display in WordPress Sites

Though Unicode defines the standard for emoji, individual applications apply their own encoding to display the same emoji in different manner.

• In Windows Word, you will see the emoji as black and white line diagram. However, when you copy and paste on the WordPress editor all the emoji will be changed to solid pictogram. The display on the published content depends on the browser display for that platform.
• You may see the same emoji shows differently, when viewing the published site in Windows, Mac or another platform. The best example is the flag emoji that Windows does not support. You will see the flag symbols in MacBook; however, Windows will show the two digit ISO code for the flag instead of an emoji.

Why My Emoji is Showing as Box or Question Mark?

You may face two problems when dealing with emoji in WordPress.

• Emoji showing as box – this is mainly due to the unsupported emoji on the platform you view. Not all applications and platforms support all Unicode emoji symbols. Browsers will show unsupported emoji as a box. For example, newly introduced emoji generally show as a box till the time browsers adapt the display specification. Check out our article on various other reasons for symbols to show as a box.
• Emoji showing as question mark – this happens when you do some kind of conversion in the database. Earlier, most of the hosts use UTF-8 as a standard format for database character encoding. However, later the encoding was changed to utf8mb4 or similar. When you import and export database without appropriate encoding, you may lose the correct encoding of emoji leading them to display as ? Make sure to use correct character encoding and test the display in staging or localhost before you do the action in live site.  

Emoji and Page Speed

One of the important factors of optimizing the page speed is to remove unused scripts and CSS. WordPress uses an emoji script that loads on each page of your site regardless of whether you have an emoji on the page or not. You can right click on your WordPress website and check the source code to see this script. The name of the script is “wp-emoji-release.min.js” with the WordPress version in the suffix. It is loaded from the JS folder part of “wp-includes” directory.

The emoji script uses “wp-emoji.js” and “twemoji.min.js” files to support the backward compatibility. It helps to convert black and white smiley and emojis to the colorful display as per the Twemoji (Twitter emoji encoding) specification.

Since all modern browsers already support emoji display, this “wp-emoji-release.js” is a redundant file from the optimization perspective. In addition, if you do not use emoji on a page it useless to load this script for compatibility purposes. You can use any of the caching plugins to remove the emoji scripts from your WordPress site.

• For example, if you are using SiteGround disable the emoji using SG Optimizer plugin.
• WP Rocket and W3 Total Cache plugins offer options to disable the emoji script.
• There is also “Disable Emoji” plugin that will standalone do this task without any other functions.