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.
Preface
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 https://codex.wordpress.org/Plugin_API/Action_Reference/wp_head
*/
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.
