Removing WordPress plugin styles and scripts from the

Posted by on

I love WordPress plugins. In fact, I love them so much that on one of the websites I’m currently working on I have 26 plugins activated and more will be added in the foreseeable future.

One downside of plugins however is that a lot of them come with CSS and JavaScript, which have to be incorporated into the theme at some point to get the plugins to work. This often means an extra request for a .css file and/or .js file is added to the theme’s <head> tag. This, of course, is bad practice: you should try to make as little HTTP requests as possible to keep your site up to speed, put your javascript in the bottom of the page to ensure faster rendering, and it also gets real tough to maintain all those separate files if many things have to change (like styling the plugin’s elements).

Gladly, WordPress offers ways of disabling the CSS and JS files that are added by these plugins. I’ll elaborate on how the adding and removing of both works. If you already know or don’t care and just want the script, just jump to the final code now. Let’s take styles for example, and look at how these are disabled. Almost exactly the same goes for scripts, which I will elaborate on further down.

Finding the plugin’s handle

First thing you have to know is how a plugin adds a style to your WordPress theme. If a plugin was written well it will make use of the wp_enqueue_style(); function somewhere in a function that’s being loaded at the moment WordPress renders your HTML’s <head> tag. To take Sociable for WordPress 3.0 as an example, there’s a function that fires when WordPress loads your CSS files with the following contents:

wp_enqueue_style('sociable3', plugins_url('sociable.css', __FILE__), false, $this->version);

If you’re a little familiar with PHP functions you will see that a function is called using four parameters. What the function does in short is telling WordPress to add a specific stylesheet file to the list of css files that are linked to in the <head>. The first of the used parameters is the plugin’s handle, in this case 'sociable3'. Plugins can use their handle for a lot of things, among which are the adding of stylesheets and javascript includes to your template. This handle you’ll have to remember (or copy/paste of course) to be able to disable it later.

Using the handle to remove the style

Just as the function above tells WordPress to add a stylesheet to the <head>, you can tell it to remove one. For this you’ll need the handle you memorized from the plugin’s code, and it goes a little something like this:

wp_deregister_style( 'sociable3' );

As you probably figured out, you’ll have to fill in the handle of your plugin between the brackets.

Unfortunately, you can only enter one handle at a time, so if you want to deregister multiple styles you’ll have to either copy and paste the function (bad practice) or have it run multiple times with all the handles for the plugins you run. The latter seemed like the best option, so further down I’ll explain how I did that. But first, we have to look at how to actually run this function.

Running the deregister function

The best way to run this function is to add it to your theme’s functions.php. Here you can add custom functions that your theme needs to work like you want it to. Also, you can’t just run the function and hope it de-registers the styles at the right moment. There’s a fixed order of scripts that are run by WordPress, and the functions.php is run before the plugins even get the chance to enqueue the styles. To make sure the de-registering runs at the right moment we have to add an ‘action’ to WordPress’ internal to-do list. So-called hooks are used to bind an action to a certain point in the code’s process, and there’s a special hook for when the styles are being printed. It’s called 'wp_print_styles'. To bind an action to it, we use the following code in functions.php:

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

As you can see there’s three parameters in this function (you can also add a fourth). The first one, 'wp_print_styles' is the hook we discussed. The second one is the name of a function you’d like to run at that point, in this case 'my_deregister_styles'. The third is this function’s priority, defining the order in which certain functions will be run if they’re coupled to the same hook. Because the adding of the styles in the plugin code is also run around this moment in the process, we set the priority to 100, making sure it’s run last of all (priority 1 is run first). This way the chances of a plugin registering a style after you tried to deregister it will be kept to a minimum (except when you use more than 100 plugins that all add styles, which probably means you have other problems to worry about).

Now that we’ve told WordPress to fire a certain function when the styles are printed, it’s time to create this function.

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
    wp_deregister_style( 'sociable3' );
}

As you can see the function has the name as I told the add_action() it would have, and the contents of the function is the wp_deregister_style() function explained above. You’re now ready to add the handle of your plugin, and you’ve removed it’s css file from the <head>! But there’s more…

Removing multiple styles and scripts

I mentioned before that it’s not possible to put more than one handle in the deregister function. To deregister multiple handles at once, the easiest way is to make an array of handles and let those be deregistered one by one automatically. For this we use a foreach() loop to walk through the array of handles and deregister each of them. Let’s say I also use the plugins wp-postratings and Contact Form 7 (I do on some blogs) and want them to be deregistered as well. I looked up the handles these plugins used and put them in an array:

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
    $handles = array('sociable3', 'wp-postratings', 'contact-form-7');

    foreach($handles as $myplugin){
        wp_deregister_style( $myplugin );
    }
}

Easy, right? This way I can just add another handle for a new plugin I might install in the future to the array, and it’s CSS is being removed automatically. But it gets even more better.

As I also mentioned, adding and removing scripts works amost exactly the same as styles. The only differences: the hook that you have to add your action to is called wp_print_scripts and the function to deregister is called wp_deregister_script();. You can just copy the same functions you used for the styles and rename them to do the same with the scripts. Or, to be more efficient, you can do it all in one function.

Since we’ve already made a hook that deregisters styles, we can use the same hook, function and handles array to take away the scripts. Note: styles are added before scripts. If you want to run both in one function you’ll have to use the wp_print_styles hook and not the one for scripts, because in case of the latter the styles have already been added! Removing the scripts at the styles hook will make sure none have been printed yet. All I have to do now is to add the wp_deregister_scripts() function to my loop.

The final function

Here it is:

function my_deregister_styles() {
    $handles = array('sociable3', 'wp-postratings', 'contact-form-7');

    foreach($handles as $handle){
        wp_deregister_style( $handle);
        wp_deregister_script( $handle);
    }
}

Just replace the handles with the ones your plugins use and add this to your theme’s functions.php file and you’re done! Also note that if a plugin adds CSS but not a JavaScript file or vice versa it will only remove what is being added, so it’s safe to add plugins that only add one of the two.

Final notes

Now that you’ve excluded the plugin’s CSS and JavaScript files the plugins might not work as planned. So don’t forget to add all the styles and scripts to another place, like the bottom of your style.css and a scripts.js file respectively, and include the scripts.js in the footer of your theme.

And as I always try to do at the end of a post, some pros and cons to this method:

Pros:

  • Faster loading of your pages (less requests)
  • Faster rendering of the HTML (javascript loaded last)
  • Easier maintenance (everything in one place)
  • Easily minify the styles and scripts (everythingin one place)
  • Simply add/remove plugins from the array
  • Upgrading plugins won’t overwrite your customizations to it’s scripts/styles

Cons:

  • Upgrading your plugins might mean newly added scripts/styles are not updated
  • Find out the handle each plugin uses. (I might just start a list of handles for common plugins)

Any more pros/cons? Other questions or comments? Let me know below or leave me a tweet at @Litso_!

7 Responses to “Removing WordPress plugin styles and scripts from the ”

  1. Kieran McCarthy said on

    Thank you for this tutorial. In the past few day I’ve waded through many similar articles but yours is the clearest. I would love to see an option within WordPress to allow which css and js scripts load on a per page basis. For now I’ll stick with your example. Thanks again :)

  2. Dave said on

    Although this works, I get a couple of errors:

    Notice: Undefined index: jquery in blog/wp-includes/class.wp-scripts.php on line 163

    Notice: Trying to get property of non-object in blog/wp-includes/class.wp-scripts.php on line 163

    It’s as if ‘jquery’ is not a registered script, and so when I call wp_deregister_script( 'jquery' ); , it can’t be removed (causing the above errors). But ‘jquery’ is a registered script, and it is removed by the above function call, so the error messages are rather confusing.

  3. Stephan said on

    Hmm, it’s been a while since I last tested this. I’ll have a look and see if I can reproduce this :)

  4. Dave said on

    Just found this page again as it was open in my tabs. Regarding the errors I had, I think it was something to do with a plugin enqueing a script that required jquery. (I fixed it a while back so can’t remember exactly).

    To fix it I registered jquery with a null script value in my theme’s functions.php file:
    wp_deregister_script( 'jquery' );
    //we need to re-register jquery so any scripts that require it will still be loaded
    wp_register_script('jquery', null);

  5. John said on

    Is there a way I can delete the following code from my header in the source code while the slider still works?

    #genesis-slider, #slides, .genesis-slider-wrap { height: 300px; width: 590px; }
    .slide-excerpt { width: 500px; }
    .slide-excerpt { bottom: 0; }
    .slide-excerpt { right: 0; }
    div.slider-next, div.slider-previous { display: none; }

    I don’t have any CSS info on my header. I am using Agent Press 2.0

    Thank you,

    John

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>