WordPress - Enqueue scripts for only if LT IE 9 WordPress - Enqueue scripts for only if LT IE 9 wordpress wordpress

WordPress - Enqueue scripts for only if LT IE 9


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 );


  • 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' );


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' );