How to remove Twemoji from your WordPress site

Categorized as WordPress Tips
Twemoji Featured Image

What is an Emoji? Twemoji?

Emojis are little icons that are a visual representation of an emotion, object, or symbol. The most commonly used emojis are smiley faces that are used to communicate on messages or posts. WordPress 4.2+ has included Emoji to the WordPress core but not everyone is aware of it. Twemoji is an open source emoji project that is created and owned by Twitter. In your source code you will see an emoji scripts with the names ‘wp-emoji.js’ and ‘twemoji.min.js’ that are being loaded onto your page. Twemoji helps convert black and white smileys and emojis to the colorful display provided by the Twitter emoji library.



However, most WordPress users don’t use any of these emojis on their websites. The problem with having unused Emojis on your website is that it adds more Javascript and CSS code to every page of your website. From a design standpoint, emojis do not look very visually appealing and are hardly used on most WordPress pages.

If you check the source code of your website you will see this emoji script with a name like ‘wp-emoji-release.min.js’ with the version of WordPress in the suffix. While it might not seem like a big deal, this additional HTTP request can be an issue and accumulate over time. All modern browsers already support emoji display, so this file is unnecessary and redundant. Regardless of whether you have an emoji on your page or not, WordPress uses an emoji script that will load on each of your pages. Not everyone needs to use these emoji libraries on their WordPress sites and we’re going to show you how to remove them with a super simple step.

How to remove Emoji without using a plugin

There are plugins that offer to remove Emojis for you, but there is no need to install another plugin to your site when you can do it by simply adding this code snippet. All you have to do is add a disable emoji function in your WordPress theme’s functions.php file. The function will remove the files or plugins being loaded for emojis.

Before you add any code, make sure you save a backup of your functions.php file in case you need to revert back to your old file. Whenever you edit your functions.php file, we highly recommend saving a copy of the file in case a typo breaks your website.

We recommend creating a child theme to add this to your theme (unless you have already done that), that way, your theme remains unchanged and if something doesn’t work right, you can simply disable the child theme.

Simply add this code snippet into your WordPress theme’s funtions.php file. Go to Appearance > Theme Editor > [select the child theme] > functions.php and add this code.

/**
 * Disable the emoji's
 */
function disable_emojis() {
	remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
	remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
	remove_action( 'wp_print_styles', 'print_emoji_styles' );
	remove_action( 'admin_print_styles', 'print_emoji_styles' );	
	remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
	remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );	
	remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
	
	// Remove from TinyMCE
	add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );

/**
 * Filter out the tinymce emoji plugin.
 */
function disable_emojis_tinymce( $plugins ) {
	if ( is_array( $plugins ) ) {
		return array_diff( $plugins, array( 'wpemoji' ) );
	} else {
		return array();
	}
}

Once you add this code, you should not see any more requests for Emoji libraries. Most users do not need emojis so we recommend using this code snippet as a clean solution to remove emoji files from loading on all of your pages.