Skip to content

Instantly share code, notes, and snippets.

@grappler
Last active January 21, 2017 08:06
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save grappler/05568f05633484499acc to your computer and use it in GitHub Desktop.
Save grappler/05568f05633484499acc to your computer and use it in GitHub Desktop.
// add ie conditional html5 shim to header
<?php
// add ie conditional html5 shim to header
function _s_add_ie_html5_shim () {
echo '<!--[if lt IE 9]>';
echo '<script src="' . get_template_directory_uri() . '/js/html5.js"></script>';
echo '<![endif]-->';
}
add_action('wp_head', '_s_add_ie_html5_shim');
<?php
/**
* Enqueue scripts and styles.
*/
function _s_scripts() {
wp_enqueue_script( '_s-html5shiv', get_template_directory_uri() . '/js/html5shiv.js', array(), '3.7.2', false );
}
add_action( 'wp_enqueue_scripts', '_s_scripts' );
/**
* Load only in IE as of WP 4.1
*/
function _s_html5shiv( $tag, $handle, $src ) {
if ( '_s-html5shiv' === $handle ) {
$tag = "<!--[if lt IE 9]>\n" . $tag . "<![endif]-->\n";
}
return $tag;
}
add_filter( 'script_loader_tag', '_s_html5shiv', 10, 3 );
<?php
/**
* Enqueue scripts and styles.
*/
function _s_scripts() {
wp_enqueue_script( '_s-html5shiv', get_template_directory_uri() . '/js/html5shiv.js', array(), '3.7.2', false );
wp_script_add_data( '_s-html5shiv', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', '_s_scripts' );
@bryanwillis
Copy link

Hopefull we wont need to deal with this much longer with IE support dying today.

Anyway, I believe below is the most up to date way to do this.

<?php
add_action('wp_enqueue_scripts', 'ie_html5_scripts');
/**
 * Enqueue shiv for IE in head
 */
function ie_html5_scripts()  {
    wp_enqueue_script( 'html5shiv',
        get_template_directory_uri() . '/js/html5shiv.js',
            array(),
        '3.7.2',
        false
    );
        wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );
}

My only problem with this method as well as wp-4.2-functions.php and wp-4.1-functions.php for HTML5shiv is that in order for it to work it absolutely must be loaded before the closing </head> tag. A caching plugin or something like this would break it's functionality. With most scripts it would be obvious, but with the shiv, 99% of developers would never even notice it wasn't working unless they were using something like Browserstack for testing.
This makes me think your original functions.php method is still the best way to include html5shiv in most cases. While it doesn't check if it's already being enqueued that could easily be fixed by doing a check for it first.

if ( wp_script_is( 'html5shiv', 'enqueued' ))
     wp_dequeue_script( 'html5shiv' );

This is probably unnecessary though considering how many different handles this script has seen over the past few years. I've seen html5, html5shiv, shiv, html5shim, just to name a few... not to mention there's the possibility that modernizr could be including it as well.

Anyway, sorry to rant here! Just curious on someone else take on this.

@grappler
Copy link
Author

@bryanwillis Thanks I did not know about the function wp_script_add_data()

I am not sure why a caching plugin would break this as the code is just generating HTML code which will be present on every page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment