Function Friday #21: add conditional comments to enqueued scripts
Every Friday, I’m sharing code snippets that I use to customize WordPress. Feedback/suggestions are always welcome! For more information, check out the first post in the series.
There are tons of articles about how to include scripts in your WordPress theme, usually with things like “properly” and “the right way” in their titles.
I always do this in functions.php:
// Register and enqueue styles and scripts
function drollic_add_scripts() {
wp_enqueue_script( 'global', get_template_directory_uri() . '/js/script.min.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'drollic_add_scripts' );When it came to scripts that need to be wrapped in conditional comments for IE, though, I was still printing them directly:
<!--[if lte IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/lteie9.min.js"></script>
<![endif]-->I didn’t know how to include those comments in the drollic_add_scripts function above – until now! I recently stumbled across a function that lets you do it all in one place.
The code
// Register and enqueue styles and scripts
function drollic_add_scripts() {
wp_enqueue_script( 'global', get_template_directory_uri() . '/js/script.min.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'lteie9', get_template_directory_uri() . '/js/lteie9.min.js', array(), '1.0' );
wp_script_add_data( 'lteie9', 'conditional', 'lte IE 9' );
}
add_action( 'wp_enqueue_scripts', 'drollic_add_scripts' );First you need to enqueue the script file like you would a normal script:
wp_enqueue_script( 'lteie9', get_template_directory_uri() . '/js/lteie9.min.js', array(), '1.0' );I’ve called this script “lteie9” because it includes polyfills for IE9 and below. The next parameter is the script’s location, which is inside my theme folder so I can use get_template_directory_uri. The script has no dependencies (unlike the other script I’m enqueueing above, which has jQuery as a dependency). Finally, this is version 1 of the script.
Next, the wp_script_add_data function will add conditional comments around the script for you:
wp_script_add_data( 'lteie9', 'conditional', 'lte IE 9' );The first parameter has to match the name of the script you set above. The second parameter should be “conditional” for conditional comments (I haven’t seen any other use for this function, actually – if you know of any let me know!). The last parameter is which browsers you’re matching here, e.g. “lt IE 8”, “IE 7”, etc.
The code above will output something like this in your <head>:
<!--[if lte IE 9]>
<script type='text/javascript' src='http://yourwebsite.com/wp-content/themes/yourthemename/js/lteie9.min.js?ver=1.0'></script>
<![endif]-->As always, remember to name your function with a unique prefix (like I’ve done here with drollic_) to avoid conflicts with WordPress core and plugin functions.
Where does it go?
This code should go in your theme’s function file. More thoughts on code location are in the first Function Friday post.
Resources
- wp_enqueue_script in the WordPress Code Reference
- get_template_directory_uri in the WordPress Code Reference
- wp_script_add_data in the WordPress Code Reference
- Conditional comments – more information from QuirksMode
Leave a Reply