What are Emoji?
Not everyone is aware that after the most recent WordPress 4.2 update the Emoji icons were added into existing WordPress installations, which includes adding the Emoji code to any existing website pages (JavaScript and CSS). If you’re unfamiliar with Emojis, here’s a quick rundown; Emoji are similar in concept to smileys, or emoticons; they’re little icons that display a range of different images, from faces to buildings and more. Originating in Japan where they’re pretty much standard issue in any online messaging system, from social media to email, the term “emoji” translates as “picture letter” from Japanese, and though they may look similar to emoticons they are technically distinct. Each character has an official name, defined as part of the unicode standard.
Great, now we know what it is, but I'm not convinced that all WordPress users are interested in this feature; in fact, generally I'm not sure it was a good idea to add them into the WordPress core. What I’m particularly concerned about is that this update adds even more JS and CSS code to every page of your WordPress site, even if you’re not using any Emoji on that particular page. This means there’s additional content to be loaded every time a user visits, and if you’re focused on keeping your page weight to a minimum for the smoothest, fastest page load possible it’s going to be frustrating having this extra stuff dumped on you. Thankfully though, it’s very easy to disable this feature, and we’ll look at how to do it now.
How to remove Emoji from your WordPress website?
The code which is being added to our pages (specifically in the head section) with the addition of Emoji look like this:
window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/URL-of-your-website\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.1"}};
!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f;c.supports={simple:d("simple"),flag:d("flag")},c.supports.simple&&c.supports.flag||(f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
Speaking from a personal viewpoint, it doesnt' look good! So, if we’re not going to be taking advantage of the Emoji icons we can go about getting rid of this code entirely. To do this, we’re going to need to modify our theme files, so you’ll need an FTP program and access to your server. Once connected, navigate to your theme’s root (or better, your child theme’s root if you’re using it), which should be wp-content/themes/themeName in your WordPress installation, and open the functions.php file in the editor of your choice. Then, add add the following lines:
// REMOVE EMOJI ICONS
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
Now save the changes to the file, refresh your website take a look at the site’s source code once again; the code for the Emoji that was previously in the head section should now have been removed.
Alternatively, if you’re not a big fan of modifying theme files you can instead install and activate the Disable Emojis plugin from the repository, but you should really ask yourself if it's really necessary to install another plugin when you can get the same result with the simple addition of two lines of code? Even if you’ve never used FTP or changed PHP files before it’s always good to develop your skills, so I heartily recommend that you give it a go!