8

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="<?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

1 Answer 1

13

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.

2
  • 1
    Unfortunately this hack is not working for scripts. Oh... that sucks! Looks like the only way is the way it is. :( Thanks for the hack by the way. :)
    – its_me
    Jun 6, 2012 at 8:42
  • Looks like we have conditional scripts starting from 4.2 core.trac.wordpress.org/changeset/31223
    – lkraav
    May 8, 2015 at 7:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.