WP Smith

Creating WordPress & Genesis Websites Since 2010

Conditionally Enqueue Script/Styles By Browser

Currently WordPress's wp_enqueue_script() or wp_enqueue_style() does not accept extra data to add HTML conditional markup (see Ticket #16024). For example, using wp_enqueue_script(), you cannot output something like this:

Instead, you will need to take the approach of most and add this to wp_head manually. And usually the "best" solution is something like this:

Although, this will result in the code being outputted regardless of the version of IE the visitor may be using.

There is, however, one little known function, used in the admin dashboard, that can be utilized to conditionally enqueue scripts and/or styles: wp_check_browser_version().

This function, found in wp-admin/includes/dashboard.php, checks to see if a site transient is available (cached for 1 week). If it is not available, then wp_check_browser_version() hits the WordPress Browse Happy API. Currently, there is no way to change a site transient expiration time (Ticket #21330), which would be advantageous here (though WordPress uses MD5 to transcode the $_SERVER['HTTP_USER_AGENT'] converting Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.57 Safari/536.11 to 93ce43dc55bd29ecc99e83ca12b5d7f4, which is friendlier for the options table).

When you access the Browse Happy API ($response = wp_check_browser_version();), here is the basic response array:

Array (
    [platform] => Windows
    [name] => Internet Explorer
    [version] => 8.0
    [update_url] => http://www.microsoft.com/windows/internet-explorer/
    [img_src] => http://s.wordpress.org/images/browsers/ie.png
    [img_src_ssl] => https://wordpress.org/images/browsers/ie.png
    [current_version] => 9
    [upgrade] => 1
    [insecure] =>
)

The names of the major browsers are as follows (of the ones I tested):

  • Chrome
  • Safari
  • Firefox
  • Opera
  • Internet Explorer

The versions returned are always those found in the About Browser (e.g. About Google Chrome: 20.0.1132.57).

While the WordPress dashboard focuses primarily on insecure and upgrade as the key to display Browser Nag Meta Box, we can use the function to get the name of the browser and the version.

So for example, if we want to enqueue a script for browsers less than IE 9, we can do something like this:

So while I could have used wp_check_browser_version() to get the browser, it makes an external API call, which I prefer to avoid if possible. Instead WordPress has some built-in simple browser detection:

  • $is_lynx
  • $is_gecko
  • $is_winIE, $is_macIE, $is_IE
  • $is_opera
  • $is_NS4
  • $is_safari
  • $is_chrome
  • $is_iphone

Here I ensure that we have IE first via $is_IE, then I make the API call for further conditional testing.

Now, we don't need HTML conditional statements to conditionally link scripts or styles, and we can follow WordPress best practices to use wp_enqueue_script() and wp_enqueue_style(). While this is not the best approach per se, it is until the ticket (#16024) for this is resolved.

How to Filter the Genesis Sidebar Defaults

By default, Genesis registers its sidebars. For styling reasons, we may want to filter those; however, this can prove difficult with Genesis if you don't understand how Genesis calls the various files and their order. WordPress follows this priority order:

  1. Plugins
  2. Child Theme
  3. Parent Them

First, WordPress gives prioirity to plugins, so modifying these defaults works well in a core functionality plugin.

Second, Genesis "teaches" many people to place their content below the statement require_once( get_template_directory() . '/lib/init.php' ) that often appears at the top of the functions.php file. In essence, by doing this you are executing genesis_init and genesis_setup hooks. So anything that hooks to those functions that appear below (and even before) this statement WILL NOT be executed.

So, let me demonstrate:

THIS WILL NOT WORK!

So, the way I build my child themes is to use functions for everything, so there is no dropping in code in functions.php, like so many do (and even as WordPress and Genesis encourages). While Genesis can do things like add_theme_support(), or genesis_register_sidebar(), etc. These are best placed inside a function that hooks to genesis_setup, genesis_init, or after_setup_theme. However, this is more about the philosophy and the praxis of child theme development.

So, if you use your functions.php as most people do, my recommendation is to either (1) add this to your core functionality plugin, or (2) develop another plugin (drop-in [plugin file that is placed in wp-content/plugins directly, see also hakre on wordpress's (sic) post on Must-Use Plugins and Drop-Ins] even). To help you, here is the plugin code you will need:

Or you can download it here: [download id="20"]

Once you download the file, just upload and install just like you would any other plugin.

Email Hazard

If you are trying to email me, I am currently unable to receive emails. Apparently, my emails began to go missing yesterday around 5-6pm. I apologize as I am working with my hosting company to resolve this issue. Please use my contact form to reach me, or Twitter (@wp_smith), or email here.