The WP.SE community has always advised the use of wp_register_script
and wp_enqueue_script
for adding scripts in a theme/template (and likewise, wp_register_style
and wp_enqueue_style
for stylesheets).
This is how I register and enqueue my scripts…
First, I add something like this in functions.php
add_action('init','wpse54189_register_script');
function wpse54189_register_script(){
//Register scripts
wp_enqueue_script( 'jquery' );
wp_register_script( 'aahan_bootstrap_transition', get_template_directory_uri().'/js/bootstrap-transition.js');
wp_register_script( 'aahan_bootstrap_carousel', get_template_directory_uri().'/js/bootstrap-carousel.js', array('aahan_bootstrap_transition'));
wp_register_script( 'wpse54189_ajax_comment', get_template_directory_uri().'/js/no-reload-comments.js');
}
then call it in a template file (say, header.php) like this
<?php wp_enqueue_script( 'aahan_bootstrap_carousel' ); ?>
<?php wp_enqueue_script( 'wpse54189_ajax_comment' ); ?>
Now, coming to the point, how do I register and enqueue “conditional JavaScript files” that are there to be recognized by specific browsers? For example:
<!--[if lt IE 9]>
<script src="https://wordpress.stackexchange.com/questions/54327/<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
How do I register and enqueue this properly?
PS: I use the Reddle theme, developed by the theme wranglers at Automattic. And the theme’s header.php directly uses the just aforementioned code — i.e. it’s not enqueued. So, does that mean, it’s the only way to do it?
1
WP_Scripts
and WP_Styles
classes are behind wp_enqueue_script
and wp_enqueue_style
functions. If you take a look at classes implementation (scripts and styles) then you will see that WP_Scripts
class doesn’t support any kind of conditional scripts, but! you can see that WP_Styles
does! The problem is that wp_enqueue_style
doesn’t allow you to setup condition.
So we have to make a small hack:
add_filter( 'wp_enqueue_scripts', 'wpse2345_enqueue_scripts' );
function wpse2345_enqueue_scripts() {
wp_enqueue_style( 'mystyle', 'url/of/my/style.css', array(), '1.0.0' );
global $wp_styles;
$wp_styles->registered['mystyle']->add_data( 'conditional', 'lt IE 9' );
}
Such hack become possible, because all registered styles are stored in registered
field of WP_Styles
class. Each of registered style is an object of _WP_Dependency
class, which allow you to add extra data.
Unfortunately this hack is not working for scripts.
Additional Information:
I was actually going through the code in Aaron Campbell’s Essence Theme last night and noticed that he was calling both a browser conditional script and style.
/**
* @var WP_Scripts
*/
global $wp_scripts;
// Conditionally load this only for IE < 9
$wp_scripts->add_data( 'html5', 'conditional', 'lt IE 9' );
/**
* @var WP_Styles
*/
global $wp_styles;
// Conditionally load this only for IE < 8
$wp_styles->add_data( 'blueprint-ie', 'conditional', 'lt IE 8' );
There is also a ticket and patch but it’s not in core yet. Obviously the conditional script won’t work without the patch but one thing to note is that you can use the add_data method directly inside your function that is attached to the wp_enqueue_scripts
action.