Stop Loading Stylesheets And Javascript In WordPress

In a previous post I wrote about how you can add stylesheets and Javascript files to WordPress correctly by using the wp_enqueue_style() function. By using this function you can make sure that you are not adding the same stylesheet twice, this also allows you to prioritise the order of adding the style sheets.

In this article we are going to look at the opposite of this function the wp_dequeue_style() function. As you can guess this function will remove the stylesheets from the enqueue. There is also an opposite function for adding Javascript files to the page with wp_deregister_script() function.

Remove Stylesheets That Has Been Enqueued

Wordpress will create a queue of stylesheets to load and will import these when it runs the wp_head function. The benefit of this system is that you can call the wp_enqueue_style function from any plugin and it will be placed at the top of the where it's meant to be.

But this can also cause a problem, for example what if you have installed a plugin that uses the Modernizer CSS library to correct some cross browser problems, but this plugin hasn't been updated for a while and is using an old version of Modernizer. Then you have another plugin this also uses the Modernizer CSS library, but this plugin is newer and has the latest version of Modernizer. You don't want to load both versions, you will only want the latest version...so what can you do?

You can open the plugin and change the code to remove the line where it adds the stylesheet. The problem with this is that if the plugin does get updated it will override your change and the modernizer file will be added again. When a plugin is updated it will replace the entire file so any changes you make will be gone.

The other solution is to use the wp_dequeue_style() function in your theme functions.php to remove the stylesheet from the enqueue.

wp_dequeue_style( $handle );

This will now stop the version 2 from loading which allows you to freely load the latest version on your webpage.

Placing this code in your themes functions.php file will mean that if the plugin does get updated then you will still be removing the modernizer version 2.

You can use the same logic for removing Javascript files from the WordPress Javascript enqueue. If a plugin is automatically loading an old version of jQuery then you can use the function wp_deregister_script() to only make sure that you are loading the latest version.

wp_dequeue_style( 'jquery' );

Conclusion

Due to the fact that some developers might actually have to do this to remove existing stylesheets from plugins brings up a couple of questions.

  • Should we still be using outdated, unsupported plugins?
  • Should plugins even automatically load generic stylesheets or javascript files like modernizer and jQuery? Developers could provide the user with an option to include these files, or is this a bit too technical for the average user?
  • Any other solutions on stop loading outdated generic stylesheets and Javascript files on your app?

Keep updated with the latest tutorials and snippets.

Join me on Twitter | G+ | Facebook

Comment