Register and enqueue conditional (browser-specific) javascript files?

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?

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating