WordPress – How to add IE EDGE header to all pages (including wp-login)

By default when Internet Explorer is displaying a website that falls within a computers intranet zone the page is rendered in IE5 document mode – typically leaving the page looking nothing like it should.

In the browsers debug console (F12) you’ll also see a message that says

“… is running in Compatibility View because ‘Display intranet sites is in Compatibility View’ is checked.”

The typical way to fix this is to add the following line to your WordPress theme in the head block

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

However this is likely a change you’ll need to make to your theme which may be lost if you change themes or install updates.

Being WordPress the answer is of course “there’s a filter for that!” – in this case wp_headers.

The example below shows how to use this filter to add this to ALL font-end pages served by WordPress regardless of what theme is enabled.

If you’re not sure where to place this code I highly recommend you read How to create a WordPress plugin for your custom functions.

add_filter( 'wp_headers', 'itsg_add_ie_edge_wp_headers' );

function itsg_add_ie_edge_wp_headers( $headers ) {
    if ( isset( $_SERVER['HTTP_USER_AGENT'] ) && ( strpos( $_SERVER['HTTP_USER_AGENT'], 'MSIE' ) !== false ) ) {
        $headers['X-UA-Compatible'] = 'IE=edge,chrome=1';
    }
    
    return $headers;
}

For whatever reason wp_headers does not run on the wp-login page – this affect the default wp-login page, but if you’ve customised the layout you’ll no doubt run into issues.

In this case we need to be sneaky and manually set the header using an unrelated filter – gettext (because we know it’s going to be running when we need it).

function itsg_add_ie_edge_wp_headers_login( $translated_text, $text, $domain ) {
    if ( 'wp-login.php' === $GLOBALS['pagenow'] && ! headers_sent() && isset($_SERVER['HTTP_USER_AGENT']) && (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false) ) {
         header( 'X-UA-Compatible: IE=edge,chrome=1' );
    }
    return $translated_text;
}
add_filter( 'gettext', 'itsg_add_ie_edge_wp_headers_login', 20, 3 );

Help! This isn’t applying to the wp-login page!