Blog Insights
WordPress and Internet Explorer: Adding Conditional Comments to Scripts and Stylesheets
Using the wp_enqueue_script() function and wp_enqueue_style(), you can decide under which conditions a script or stylesheet should be included, what dependencies each asset needs before loading, and what order those dependencies should be in. There is even functionality to dequeue a script or style so it is not loaded on the front end of your website. More importantly, the enqueue system ensures that only one instance of a script or style is loaded to prevent a duplicate loading of static assets.
But what if a script needs to be wrapped in Internet Explorer conditional comments so it is only served to a version of Internet Explorer? In this case, are you stuck just printing the script and style tags in the head of the page and foregoing the extra benefit of the enqueue system? No!
How to Get Started
The first step is to register your scripts and styles using the WordPress wp_enqueue_scripts action. While this might seem a bit confusing, registering your scripts allows you to define certain attributes about the script/style, e.g., what other scripts/styles should be loaded as a dependency before the script in question.
A common scenario you might come across is needing to load a custom script that depends on the jQuery library to be loaded first. To do this, you can do the following in your plugin or theme’s functions.php file:
<?php
function register_my_custom_scripts() {
wp_register_script( ‘my-script’, get_template_directory_uri() . ‘/js/my-script.js’, array( ‘jquery’ ) );
}
add_action( ‘wp_enqueue_scripts’, ‘register_my_custom_scripts’ );
The first part of the wp_register_script() function gives the script a handle that can be used to reference that script later in addition to providing a URL of where the script is located. The third is a list of other scripts that should be loaded before ‘my-script’ is loaded, which in this case is jQuery.
From here you can enqueue the script to where you want it to appear on the front page. To do that, you can call wp_enqueue_script( ‘my-script’ ) just before the get_header() template tag:
<?php
wp_enqueue_script( ‘my-script’ );
get_header();
At this point, your WordPress homepage should have the following in the <head> section:
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”profile” href=”http://gmpg.org/xfn/11″>
<title>My WordPress Blog</title>
<link rel=”alternate” type=”application/rss+xml” title=”My WordPress Blog Feed” href=”http://example.com/feed/” />
<link rel=”alternate” type=”application/rss+xml” title=”My WordPress Blog Comments Feed” href=”http://example.com/comments/feed/” />
<script type=’text/javascript’ src=’http://example.com/wp-includes/js/jquery/jquery.js?ver=1.11.3′></script>
<script type=’text/javascript’ src=’http://example.com/wp-content/themes/your-theme/js/my-script.js?ver=4.4.2′></script>
<link rel=”EditURI” type=”application/rsd+xml” title=”RSD” href=”http://example.com/xmlrpc.php?rsd” />
<link rel=”wlwmanifest” type=”application/wlwmanifest+xml” href=”http://example.com/wp-includes/wlwmanifest.xml” />
<meta name=”generator” content=”WordPress 4.4.2″ />
</head>
Now let us assume My Script is special only for Internet Explorer 8 and below. You will want to wrap the script in Internet Explorer conditionals so the script is only downloaded and executed for Internet Explorer 8. Non Internet Explorer browsers will simply ignore the script, so for Internet Explorer specifically, we want this:
<!–[if lt IE 9]><script src=”http://example.com/wp-content/themes/your-theme/js/my-script.js“></script><![endif]–>
Filters to the Rescue!
Filters in WordPress let you hook into a process within WordPress and modify a value without having to rewrite the entire functionality. If you want to change the markup for a certain script before it is printed on the page, you can do so using the script_loader_tag filter. This filter gives you access to three things: (1) the HTML of the <script> tag, (2) the handle of the script that is being rendered, and (3) the script source pointing to the URL of the script to be loaded. You want to change the markup a little bit and pass it back to WordPress to continue printing to the page.
To add a filter, write a function like this:
function my_script_loader_function( $html, $handle, $src ) {
// Our code will go here
}
add_filter( ‘script_loader_tag’, ‘my_script_loader_function’, 10, 3 );
You only want to change the HTML for your script with the handle of ‘my-script’. Then add ‘<!–[if lt IE 9]>’ before the opening <script> tag and <![endif]–> after the closing </script> tag. The code should look like this:
function my_script_loader_function( $html, $handle, $src ) {
if( $handle === ‘my-script’ ) {
‘<!–[if lt IE 9]>’ . $html . ‘<![endif]–>’;
}
return $html;
}
add_filter( ‘script_loader_tag’, ‘my_script_loader_function’, 10, 3 );
As you are modifying a filter, send a value back at the end of your function with the return $html; which is what passes the <script> tag back to WordPress.
There is a filter for the <style> tags as well called style_loader_tag which works the same way.
You’re Now an Enqueue Master
Hopefully the above tips on using the enqueuing functionality of WordPress have been useful, and they provide both a powerful and simple approach to managing which scripts/styles are loaded onto your webpages. So the next time you think about printing an Internet Explorer conditional comment directly to a page, consider using a filter to do what you want and keep the goodies of the enqueue system intact. Best of luck!