WordPress – only load CSS stylesheets on pages that need them

This is a followup to my previous post on adding scripts only to the WordPress pages that need them. Please read that first, or this might not make much sense…

To cleanup the dynamically generated head section even more, you can disable the styles associated with scripts that aren’t loaded on every page.

The easy way to do this is very similar to what I talked about last time – add this code to your functions.php file (or custom-functions.php if your theme supports it):

The plugin I’m working on is WPNG Calendar, which displays a stream of events from Google Calendar. I want to show it, in this case, only on the site’s About Us page. I’ve already deregistered the scripts associated with WPNG Calendar on most pages, so now I want to hide the styles on the same pages (why load them if you don’t need them?).

So now you’ll do the same thing as in the previous post with a twist:

  1. View the source for a page on your site and find the CSS stylesheet links associated with the plugin that you’ve already deregistered on most pages;
  2. Open up the file that calls that stylesheet – in my case I’m looking at wpng-calendar.php.
  3. Search for wp_enqueue_style within the PHP file and find the handle for the stylesheet you want to deregister. The handle is the first element in parentheses after the wp_enqueue_style element – in the snippet above they are thickbox and style.

A Problem That You Can Fix Yourself!

What happens if you can’t find a ‘wp_enqueue_style’ in your PHP file? This is unfortunate; it means that the plugin creator isn’t making easy for you. Using wp_enqueue_script and wp_enqueue_style makes it simple to work with the tools WordPress has built-in, but there’s a way around this.

Look for a link that calls a stylesheet – something like this:

Comment that line out and add your own wp_enqueue_style line, replacing the handle with the stylesheet name and editing the source link as needed (refer to this reference for parameters, I didn’t include what I wasn’t sure about):

Now you have a stylesheet being loaded in the way WP intended it to happen and you have a handle (‘style’) that you can plug into the deregister function.

Do the same thing for any other stylesheets being called, add those handles to the function and you should be good to go. This is the final version of my function:

You can see that I’m hiding the styles from the head section on all but three pages:

I hope this is helpful – please let me know if you find these two posts on restricting plugin loading useful and understandable.


  1. Yes! Thanks for the tip, I have a file I include from the functions.php in your theme directory. I call it ‘init.php’ Previously I was removing them at the ‘head’ action but doing it at ‘wp_print_styles’ is perfect. I now have 3 deregister funcitons, it’s how I keep my site minified you can check it out here: http://www.focusem.com

    Check the YSlow rating, if I can get the client to sign up for SimpleCDN I’d have an A rating, it’s not far from perfect!

  2. In your first code example, shown in green, the word ‘thickbox’ is missing an apostrophe at the beginning, which will break the code if people try to copy & paste. Thanks for the post, great help!

  3. I love your site’s design. But your coding examples using green text is impossible to read!

    Keep up the great articles

  4. Thanks for mentioning it – it’s something I’ve meant to do but it keeps floating to the back of the list. I’ll make a note to change the color this week.

  5. It’s a priority, I think 10 is the default, and anything more than 10 would load later. 100 is a pretty low priority but that’s what’s suggested in the articles I read about this function.

  6. Is it possible to have multiple arguments to deregister specific plugins on specific pages?

  7. Yes, you should be able to use WordPress conditional tags like this – if this is what you’re asking:

    function my_deregister_styles_contact() {
    if ( !is_page('contact') || (!is_front_page() ) {
    wp_deregister_style( 'contact-form-7' );
    wp_deregister_style( 'style' );

  8. I needed something to disable plugins on certain pages and other plugins on certain pages making it truly conditional. I tried working with a switch statement which became a work around for now. One strange thing is the case that does not have a “!” deregisters it for all pages except for the Home, which should do just the opposite right?

    function my_deregister_styles() {
    case ( is_page(‘home’)):
    wp_deregister_style( ‘contact-form-7);
    case ( !is_page(‘about’)):
    wp_deregister_style( ‘style’ );

    Please let me know if you think I’m doing anything wrong. Thanks

  9. No, actually is_page(‘home’) will only show the plugin on the home page, hiding it on all other pages. If you want to hide it only on Home you’d use !is_page(‘home’) or !is_front_page() if you have a static front page. !is_page(‘about’) should be hiding it only on About.

    I haven’t tried it with a switch statement, but something like this should work:

    function my_deregister_styles() {
    if ( is_page(β€˜home’) ) {
    do this only on the home page;
    } elseif ( !is_page(‘about’) ) {
    do this other thing on all pages except About;
    } else if ( is_page(‘some-other-page’) ) {
    do something else on another page;

  10. I’ve tried it with the statement that you suggested with the if and elseif conditional. It seems that only the first one works, but when it doesn’t run the second statement because the first one was fulfilled?

    Thanks for your help by the way.

  11. Hmm. I do have that statement working for another purpose in a site…

    You could always split them out into multiple functions if necessary. Sorry I can’t be more help with this, but I’m really not a programmer.

  12. I ended up weighing out what I can disable more of as an overall site. Thanks again, that was a lot of help!

Leave a Reply

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