Wordpress Bootstrap html5 wp_enqueue_style

Question

I'm trying to wp_style_add_data for bootstrap for html5shiv.min.js and respond.min.js

Tried:

wp_enqueue_style( 'theme-ie', 'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js', array( 'theme-style' ), '3.7.2' );
wp_enqueue_style( 'theme-ie-2', 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js', array( 'theme-style' ), '1.4.2' );
wp_style_add_data( 'theme-ie', 'conditional', 'lt IE 9' );
wp_style_add_data( 'theme-ie-2', 'conditional', 'lt IE 9' );

But this is adding if lt IE 9 twice:

<!--[if lt IE 9]>
<link rel='stylesheet' id='theme-ie-css'  href='https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js?ver=3.7.2' type='text/css' media='all' />
<![endif]-->
<!--[if lt IE 9]>
<link rel='stylesheet' id='theme-ie-2-css'  href='https://oss.maxcdn.com/respond/1.4.2/respond.min.js?ver=1.4.2' type='text/css' media='all' />
<![endif]-->

it's possible to add html5shiv and respond scripts within same if lt IE 9 using wp_style_add_data, or is neccesary to add codes manually to wordpress header.php?

Answer 1

Use script_loader_tag :

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