Removing Emoji from your WordPress site in seconds

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.

Emoji Icons

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!

Removing Emoji from your WordPress site in seconds 4.605 (92.00%) 20 votes
Share
This article was first published June 19th, 2015
  • Suvetha Purushothaman

    It works. Thanks

  • Andy

    this code works for me but i still have an issue, the Layerslider module’s css is changed when i remove this imoji js using the above code.can you anyone help?

  • It works.. thanks

  • ” I’m not sure it was a good idea to add them into the WordPress core” So… because some might not want it all the rest must pay the consequences? Emojis are great to me, there should be more of them available, like flags which is what i actually was looking for, and led me here

    • Every resource that gets loaded has a negative impact on page speed, so if you want your site to be 100% optimized and you do not use emojis, you definitely want to stop them from slowing down your site.

      • Andy

        can you tell me in which wordpress files is located this emoji js and css code?

    • Marek

      I want an useless JS file which size is 30Mb and set everybody CPU on fire in the WordPress core. It’s great to me. I’m sure everybody else will understand.

  • SOLVED! Thank you, after i added the code to the function.php the Emoji disappeared completely, thank you again :) وظائف

  • William Marshall

    Works for me too…thnks mate

  • really simple code, but is working for me… thank bro