WordPress - Enqueue scripts for only if LT IE 9

Question

In a WordPress theme, how do you conditionally include scripts for ie8 and below? This is primarily to apply polyfills for various html5/css3 features. I see that wp has the $is_IE variable which can be used as a conditional to only include scripts for IE. Is there a way to add the script for only certain versions of IE though rather than all of them? This is simple with some HTML ie conditional comments, but I'd like to include the scripts all in the same place in my functions file.

Conditional for specific versions in HTML:

<!--[if lt IE 9]> <script src="iepolyfill.min.js"></script> <![endif]-->

Conditional for all IE in WP:

    global $is_IE;

    if ( $is_IE ) {
        wp_enqueue_script( 'iepolyfill', bloginfo('stylesheet_directory').'/js/iepolyfill.min.js' );
    }

I've looked around and mainly find details about conditional scripts for wp backend only.

Any suggestions?

Answer 1

As wordpress is a PHP script, it can access server variable via $_SERVER

Then you can search for detect browser with PHP, PHP: If internet explorer 6, 7, 8 , or 9

Answer 2

For WordPress 4.2+

Use wp_script_add_data to wrap the script in a conditional comment:

wp_enqueue_script( 'html5shiv', '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js' );
wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );

wp_enqueue_script( 'respond', get_template_directory_uri() . '/js/respond.min.js' );
wp_script_add_data( 'respond', 'conditional', 'lt IE 9' );

Just make sure you register the script before invoking wp_script_add_data (registering is handled by wp_enqueue_script above), and that the first argument you pass to wp_script_add_data matches the first argument you passed when you registered the script.

---

For WordPress 4.1

You can use the script_loader_tag filter today to enqueue scripts wrapped in conditional comments. Here’s an example implementation:

wp_enqueue_script( 'html5shiv', '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js', array(), '3.7.2', false );
add_filter( 'script_loader_tag', function( $tag, $handle ) {
    if ( $handle === 'html5shiv' ) {
        $tag = "<!--[if lt IE 9]>$tag<![endif]-->";
    }
    return $tag;
}, 10, 2 );

And if you want to include more than one script in the same way, you can use something like:

// Conditional polyfills
$conditional_scripts = array(
    'html5shiv'           => '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js',
    'html5shiv-printshiv' => '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv-printshiv.js',
    'respond'             => '//cdn.jsdelivr.net/respond/1.4.2/respond.min.js'
);
foreach ( $conditional_scripts as $handle => $src ) {
    wp_enqueue_script( $handle, $src, array(), '', false );
}
add_filter( 'script_loader_tag', function( $tag, $handle ) use ( $conditional_scripts ) {
    if ( array_key_exists( $handle, $conditional_scripts ) ) {
        $tag = "<!--[if lt IE 9]>$tag<![endif]-->";
    }
    return $tag;
}, 10, 2 );

Answer 3

• You should use wp_register_script() whenever you add scripts to your WP themes or plugins.
• Server side sniffing is generaly bad idea, because it's unsure.
• Usually you want to target browsers lacking sertain features, not necessarily only IE browser. Modernzr is good scripts to do just that.

For IE, conditional tags work very well. Here's how you can add conditional tags into a script, example is for HTML5shiv:

global $wp_scripts;
wp_register_script( 
    'html5shiv', 
    get_bloginfo('template_url').'/assets/js/html5shiv.js', 
    array(), 
    '3.6.2'
    );
$wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' );

Answer 4

Solution for WordPress 4.2 and above

The correct way would be to apply wp_enqueue_script since it JavaScripts here, and not css styles. Also, it is better to use get_bloginfo('stylesheet_url') to make sure this also works in Child Themes.

/**
 * IE Fallbacks
 */

function load_IE_fallback() {
    wp_register_script( 'ie_html5shiv', get_bloginfo('stylesheet_url'). '/js/html5shiv.min.js', __FILE__, false, '3.7.2' );
    wp_enqueue_script( 'ie_html5shiv');
    wp_script_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );

    wp_register_script( 'ie_respond', get_bloginfo('stylesheet_url'). '/js/respond.min.js', __FILE__, false, '1.4.2' );
    wp_enqueue_script( 'ie_respond');
    wp_script_add_data( 'ie_respond', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'load_IE_fallback' ); 

Answer 5

Update for WordPress 4.7.3 with scripts loading from CDN:

    add_action( 'wp_enqueue_scripts', 'load_IE_fallback' );
function load_IE_fallback() {
    wp_register_script( 'ie_html5shiv', 'https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js', '', '3.7.3', false );
    wp_register_script( 'ie_respond', 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js', '', '1.4.2', false );

    wp_enqueue_script( 'ie_html5shiv');
    wp_enqueue_script( 'ie_respond');

    wp_script_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );    
    wp_script_add_data( 'ie_respond', 'conditional', 'lt IE 9' );
}

Answer 6

The best way to do it is enqueue the scripts and then use wp_style_add_data() to put conditional. This method is being used by official themes like twenty thirteen

There is an answer similar to this but he adds extra if in the condition which is wrong.

wp_register_style( 'ie_html5shiv', get_template_directory_uri() . '/js/html5shiv.js' );
    wp_enqueue_style( 'ie_html5shiv');
    wp_style_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );

    wp_register_style( 'ie_respond', get_template_directory_uri() . '/js/respond.min.js' );
    wp_enqueue_style( 'ie_respond');
    wp_style_add_data( 'ie_respond', 'conditional', 'lt IE 9' );

Answer 7

Try to use the wp_style_add_data() function (officially used in twentythirteen and twentyfourteen theme:

wp_enqueue_style( 'iepolyfill', bloginfo( 'stylesheet_directory' ) . '/js/iepolyfill.min.js' );
wp_style_add_data( 'iepolyfill', 'conditional', 'if lt IE 9' );

Update: Since WordPress >= 4.2.0 there is a function that is used in the same way. It's called:

wp_script_add_data()