Removing wp-emoji-styles-inline-css from your WordPress source code

Are you tired of trying to search for a modern approach to removing emojis from your website? Me too!

Like REALLY remove the emojis? I saw so many outdated tutorials on my searches that would get rid of everything except this small snippet of inline CSS.

<style id='wp-emoji-styles-inline-css' type='text/css'>
	img.wp-smiley, img.emoji {
		display: inline !important;
		border: none !important;
		box-shadow: none !important;
		height: 1em !important;
		width: 1em !important;
		margin: 0 0.07em !important;
		vertical-align: -0.1em !important;
		background: none !important;
		padding: 0 !important;

I couldn’t find the answer, so I dove into WordPress core to find out what exactly it was doing to add this into the website. Low and behold, WordPress was adding this to the head, and in a slightly unusual way than in the core’s past.

It was enqueue’ing this inline CSS inside the wp-includes/formatting.php file on lines 5865 – 5889. NOW WAIT! Before you go off modifying the WordPress core and messing up your website, there’s another way to do this.

Add this to your functions.php file

add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'wp-emoji-styles' );

That will take care of the annoying extra inline CSS related to emojis. All set!

If you are looking for how to remove all the emojis related styles and scripts, check out my other blog post about disabling it all safely within your theme’s functions.php file, no core modifications needed!