Add X-UA-Compatible Meta tag to your WordPress theme

2 minutes read

If you are a Web developer and still code websites compatible with a few older versions of Internet Explorer, then you must be well aware of X-UA-Compatible meta tag.


The X-UA-Compatible is a document mode meta tag that allows web developers to choose for what version of IE the page should render as. Below is how the tag looks like:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

You may provide information to the content attribute accordingly as per your requirement, and make the older version of IE use the latest document mode that would minimize the layout mess-ups to the least. If you are unsure about what should be used, refer this detailed document.

WordPress and X-UA-Compatible meta

WordPress doesn’t add the tag automatically to the head, you have to add it manually by yourself, depending on the requirement of your project.

How to do that? Well, the process is pretty simple if you choose to edit the header.php file of your theme, and add the suitable tag in the <head> section.

The right way to that

There’s a lot more cleaner and efficient way as well, and trust me it’s much better practice than adding the information manually to theme’s header file.

I’m talking about programmatically hooking the information to the departments like WordPress header. By making use of wp_head hook, you can add any sorts of valid info to the WordPress header.

Here’s a piece of some ready-made code that you can use in your functions.php to bring about the addition of X-UA-Compatible meta tag:

 * Additional head info
 * Add additional X-UA-Compatible meta information to the 
 * `<head>` section.
 * @link 
function wpcrux_head_meta() {
   * MS IE and Edge compatibility meta (modify `content` as 
   * per your requirement).
  $html = "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"/>\n";
  echo $html;
add_action( 'wp_head', 'wpcrux_head_meta' );

And that’s it! In order to avoid any damage, be sure to create a copy of your WordPress theme for the backup purposes.

Is there a plugin to do that?

Just in case you are not a Web developer but still digging the internet to get this meta tag thing added to your theme, I have this plugin recommendation for you: Head & Footer Code.

Note that the plugin mentioned above allows you to add any information to the head and the footer, so be sure to add the appropriate tags to the head only.

Do you still code your website for the older IEs? Do you use the X-UA-Compatible in your projects? Do you have more thoughts on this? Let’s talk about that in the comments.

Facebook Twitter LinkedIn Telegram Whatsapp Pocket

Related Posts:

WordPress automatically adds its current Version number to the head section of the themes. If you view the source of a WordPress-based website, you may find out the WordPress version it is using. Below given is the meta tag that carries that version informatio...
WordPress featured thumbnails allow you to add a featured image to your posts. If your WordPress theme has this functionality, then you may set a featured thumbnail to your post by using the Featured Image meta box by clicking the Set Featured image link and u...
To track website tags with Google Tag Manager, follow these steps:Set up a Google Tag Manager account: Start by signing in to your Google account and access the Google Tag Manager website. Create a new account by providing the necessary details and setting up ...