Search

How to Conditionally Enqueue Stylesheets in WordPress

Listen to this article
conditionally-load-stylesheet-wordpress
Conditionally Load Stylesheets in WordPress

The job of a User Experience developer is quite difficult. As a UX developer, not only am I expected to make the content presentable, but I have to also ensure, that my changes do not affect the performance of the webpage. Now, it’s not always possible to conclude what  visitors might like, in terms of presentation. However, it is easy to infer, what visitors would definitely NOT like. And that would be ill-structured content, and a slow site.

What happens is, sometimes, the styling added, does not work with certain browsers and could result in awry looking content. But loading additional stylesheets might affect your site’s performance. So then what is one supposed to do in this case?

If you’re like me, facing the same problem, do not worry! Overtime, I’ve armed myself with the tools (knowledge and experience), to guide you in the right direction. The way out, is to conditionally enqueue stylesheets. So that’s exactly what we will be learning today:

  1. How to enqueue stylesheets for particular pages
  2. How to enqueue stylesheets for particular browsers

[space]

Conditionally Enqueue Stylesheets for Certain Pages

For pages to load faster, the number of requests each page has to make should be few. So let’s start by reducing the total number of stylesheets needed by your site.  But there may be conditions out of your control. For example stylesheets added by plugins, or styling needed by particular page templates, added in different CSS files. In such cases plugin and theme developers should take care, to ensure that the additional files are loaded only when needed. For example, stylesheets added by a plugin, should be loaded only when the plugin is activated, or if the plugin adds a shortcode, then stylesheet could be enqueued in the shortcode function itself.

To conditionally load stylesheets for particular pages, specific to a particular page template, you can use the following conditions, to decide whether or not to enqueue the files:

[pre]is_page(”)[/pre]

This is_page function can be used to conditionally check for a particular page, before enqueueing the stylesheets.

[space]

Conditionally Enqueue Browser Specific Stylesheets

You might have come across a lot of CSS properties which do not work with certain browsers, mainly IE *ahem* *ahem*. No stress. There is a workaround. For those of you using the <!–[if IE]> … <![endif]–> in the header or footer to enqueue your stylesheets, you do not need to do this anymore. Instead there is a better way to enqueue stylesheets (and scripts) using the ‘conditional’ property.

Add all the browser specific CSS in a single file. In the example below we have added the IE8 specific CSS in wdm-ie8-style.css. We then need to enqueue the stylesheet conditionally, using the code below:

function wdm_enqueue_stylesheets(){
    wp_enqueue_style('wdm-ie8-style',get_stylesheet_directory_uri().'/wdm-ie8-style.css');
    // add condition for IE8
    global $wp_styles;
    $wp_styles->add_data('wdm-ie8-style', 'conditional', 'IE 8');
}
add_action( 'wp_enqueue_scripts', 'wdm_enqueue_stylesheets' );

Just add the code in functions.php of your theme, or your plugin file.

The ‘conditional’ property is used to load the stylesheet only for particular browsers (specifically IE). You can combine it with directly a browser version, (like we have done), or add browser version and lower, or browser version and higher (using lt, lte, gt, and gte), along with the browser version.

Do note, this does not work for IE10 and higher. Although those browsers are much better and support a lot of properties, in case you face any issues, you can refer: How to test IE version in PHPto add the needed condition.

[space]

Well, I’ve done my best to give you tips, which can help you load stylesheets only when needed. Thus not affecting your site’s performance, and yet styling your pages as needed. But I’d love to hear your suggestions and tips, so do leave your comments in the comment section below 🙂

Aruna Vadlamani

Aruna Vadlamani

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads

    WordPress Tips & Tricks
    Ketan Vyawahare

    How to Make Responsive Tables using CSS without Tag Read More »