Many plugins and themes add JavaScript and CSS files to your site. While this alone isn’t necessarily a bad thing, using several plugins that do this can bog down your site with loads of requests for these files.
The good news is that WordPress has a built-in system that allows us to deregister these scripts and styles.
Wait, don’t the plugins require this code? Probably. But, we want to take control of these files and make our sites run faster. Disabling these scripts and styles will allow us to do a few things:
- Combine multiple files into single files (mileage may vary with JavaScript here).
- Load the files only on the pages we’re using the script or style.
- Stop having to use
!importantin ourstyle.cssfile to make simple CSS adjustments.
For this exercise, I’ve chosen two popular plugins from the plugin repository: Contact Form 7 and WP-PageNavi.
The dirty truth
Not all plugins use the appropriate methods for loading scripts and styles. Some developers just drop stuff right in the header. This is usually because they’re not familar with two important WordPress functions: wp_enqueue_script() and wp_enqueue_style(). If your plugin/theme author isn’t using these functions, please encourage them to do so. It allows the rest of us to work with their code using the methods WordPress provides.
While figuring out what scripts or styles you want to disable, you might have to get your hands dirty. This means looking in code. Unless your plugin author has documented the script or style handle, you’ll need to find it.
Disabling JavaScript
For this example, we’ll be disabling the Contact Form 7 plugin’s JavaScript. The first thing you need to do is find the handle for the script. Open the wp-contact-form-7.php file in your favorite text editor and do a search for wp_enqueue_script. Doing so will turn up this bit of code:
wp_enqueue_script( 'contact-form-7', wpcf7_plugin_url( 'contact-form-7.js' ), array('jquery', 'jquery-form'), WPCF7_VERSION, $in_footer );The handle for this plugin’s JavaScript is contact-form-7. Now, you can close this file and move on.
Open your theme’s functions.php file and add this PHP in:
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
}Once saved, the script will no longer load. You can deregister as many scripts as you want within this function.
Disabling styles
In this example, we’ll be disabling WP-PageNavi’s stylesheet. This is something I almost always do because I add the style rules to my theme’s style.css file.
The first thing you should do is open wp-pagenavi.php in a text editor and search for wp_enqueue_style. This will turn up this code:
wp_enqueue_style('wp-pagenavi', get_stylesheet_directory_uri().'/pagenavi-css.css', false, '2.50', 'all');And this:
wp_enqueue_style('wp-pagenavi', plugins_url('wp-pagenavi/pagenavi-css.css'), false, '2.50', 'all');What we’re looking for is wp-pagenavi, which is the handle for the style. Once you’ve found that, close the file and add this to your theme’s functions.php file.
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'wp-pagenavi' );
}That’ll disable the stylesheet for this plugin. Feel free to deregister as many styles as you want within this function.
Tips on making this work better
You’ve disabled several scripts and styles, but you need to do something with them. Here’s a list of tips on how to make use of the methods described in this tutorial:
- Append styles that you’ve disabled to the end of your theme’s
style.cssfile and edit them from there to get the look you want. - Combine several scripts into a single file and load it yourself. I would only do this for things that use the same JavaScript library. For example, I often combine scripts that are built on jQuery.
- Use conditional tags for fine-grained control over when a script or style is loaded.
If you disable something, it may cause the plugin/theme not to work correctly. Most styles can easily be added to your theme’s stylesheet so that you’re not loading a ton of stylesheets on your site. JavaScript is a different beast altogether, and I only recommend combining multiple files into one if you know what you’re doing.
Have fun with this. Experiment. Share your experience with others in the comments.
The other problem comes from plugin that, as you said in the begining of the article, don’t use wp_enqueue. We can get rid of those by removing the wp_head filter the plugin uses to append the script/style.
It would be so good if every plugins were giving you the chance to say where they are allowed to include styles and scripts. Most of them just include on every page, regardless of if the script is used or not…
[...] How to disable scripts and styles A great tutorial by Justin Tadlock. You will learn how to integrate plugins in a clean way with your theme, in order to load pages faster and in a better way. (tags: wordpress tutorial plugin style css javascript) [...]
Short, descriptive and sweet tip. Thanks for sharing this with us.
I figured out that, the script can be registered, only, when needed:
So it will load that script only on Contact page…
Really useful technique. I have been looking for something like this.
The solution that J Mehmett added to the script is very nice too.
Great job.
Hi Justin! Thank you for nice articles every time
To Contact Form 7 users, you can also use WPCF7_LOAD_JS constant to control JavaScript loading.
http://ideasilo.wordpress.com/2009/05/31/contact-form-7-1-10/
Takayuki Miyoshi (author of Contact Form 7)
Hi, Justin!
Sorry for offtopic)
Your widget “WordPress-o-Sphere” in sidebar — is this just text widget or some kind of plugin?
Oh this is a wonderful tip
I have many plugins so I’ve been thinking of trying to reduce the load they put on the site and this could really help. Thank you!
Thanks Justin,
That’s a good point and it’s a good idea to tidy it all up into one style sheet.
I’m trying to keep my plug-ins to a minimum and havent looked at this yet, but one link widget I had uses a remote file which is also going to slow it down. Possible I could copy that file onto my server although that would mean updating it regularly.
Thanks
Keith
[...] to Justin Tadlock for this great recipe! If you enjoyed this article, please consider sharing it! [...]
This couldn’t have come at a better time. One thing that has always annoyed me about Contact Form 7 was the fact that it loaded what was only needed on the contact page onto every single page of the site. I now have exactly what I need to create cleaner and meaner WordPress based sites.
Great! Timely script for me. Just checking out my scripts and found out I need to disable some styles of my page.
Ben — You shouldn’t remove it from your theme, but use
remove_action()in your theme’sfunctions.phpif that’s the case. I would’ve mentioned it in the article, but I don’t want to promote bad practice.Ideally, plugins would allow you to choose the pages it’s loaded on.
J Mehmett — Yes, that’s the way to do it. Thanks for sharing your code with everyone.
Banago — Thanks. I’m glad you found it useful.
takayukister — That’s an interesting technique for disabling JavaScript. My hope though would be that you promote the technique mentioned above though because users would probably be more comfortable editing their theme’s
functions.phprather than theirwp-config.phpfile.brainsolid — It’s the Bookmarks widget, which is standard in my Hybrid theme. It’s also available as a plugin: Widgets Reloaded.
Gaby — I usually shy away from using several plugins that load scripts and styles, but when I do need to use them, I typically use these techniques to make sure they’re only loaded when needed.
Keith Purkiss — I’d honestly look for an alternate plugin rather than using something loaded from another person’s site.
Joe Somebody — I find this is common with a lot of contact form plugins, which is one of the reasons I picked that one out of the bunch.
Simon Wilby — I’m glad this tutorial is coming in handy for you.
Hi Justin,
Love your articles in general.
Just a question out of the scope of this article: how do you setup the “notify me of followup comments via e-mail” as you are doing below?
Are you using “http://txfx.net/code/wordpress/subscribe-to-comments/”?
It’s really useful.
But what about the others?
How could I disable them :-<
Gilbert — Yes, that’s the plugin I use. You only need to activate it, and the plugin takes care of the rest.
V.C. — How can you disable the other what? This method will work with both plugins and themes.
[...] How to disable scripts and styles – In this post, Justin Tadlock goes over how to disable scripts and styles added to your WordPress sites by plugins. This has a number of uses, for example if you don’t want the Contact Form 7 stylesheet to load on other pages besides your “Contact” page. [...]
[...] How to disable scripts and styles – In this post, Justin Tadlock goes over how to disable scripts and styles added to your WordPress sites by plugins. This has a number of uses, for example if you don’t want the Contact Form 7 stylesheet to load on other pages besides your “Contact” page. [...]
Hi Justin, thank for this really handy tip. Now i know how to disable the CSS from the Cleaner Gallery Plugin without commentig out every time you update your plugin.
Thank you very much.
[...] WordPress dispõe de um sistema próprio que permite anular estes scripts e [...]
[...] WordPress dispone de un sistema propio que permite anular estos scripts y [...]
Eduard Seifert — Yep, that’d be the way to do it.
Short, descriptive and sweet tip.
That wasvery usefull to all of us.
The good thing in WP is that it’s very friendly, has a lot of plugins and a lot of knowledge such as Justin’s. But it’s quiet confusing for beginners.
I moved from shared blogging system towards WP.
Can you refer for the beginners any simple website, beside your most important post ?
Thanks for simplifying this otherwise complex process so even a WP newbie like me can tackle this performance optimization. However, I will leave the file merge to an expert.
Very useful tip. When a project tends to evolve, a plethora of plugins tend to follow. Advice like this can make all the difference. Thanks!
This is a really great tutorial. One of my websites has become insanely slow, and I followed these instructions and it helped a lot! Thanks mate!
[...] this tutorial Justin Tadlock describes a smart solution to disable scripts and styles of your plugins by looking [...]
[...] this tutorial Justin Tadlock describes a smart solution to disable scripts and styles of your plugins by looking [...]
Thanks for great tips. I followed your instructions, changed theme and my blog loads 5 times faster
[...] this tutorial Justin Tadlock describes a smart solution to disable scripts and styles of your plugins by looking [...]
[...] this tutorial Justin Tadlock describes a smart solution to disable scripts and styles of your plugins by looking [...]
Some of the blog I frequent on a regular basis could do with reading this article. I’ll discretely pass this post onto some of them. Thanks
[...] How to disable scripts and styles – [...]
[...] to Justin Tadlock for this great [...]
this is a useful techniques.thanks for a nice article i might be thinking to change my theme and this will be a very useful guide for me.
I’d add one more – use a plugin like Headspace2, it enables you to load scripts, css, or just raw head data on a post by post basis, after you’ve stopped them loading globally. So I do that with wp-polls, so the poll css is not on every page when I only need it on an occasional post.
Thanks for this Justin. I have several plugins that I have customized the styles for and now I don’t have to worry about editing their respective stylesheets every time the plugin is updated.
At the beginning I also tried out every plugin and widget available. But it really slowed down my whole page. Also it sometimes looks unprofessional if you have to many widgets and plugins. But thank you Justin for providing us with a script. That way you don’t have to uninstall everything – what I always did until now.
[...] WordPress: How to disable scripts and styles (from Plugins) Many plugins and themes add JavaScript and CSS files to your site. While this alone isn’t necessarily a bad thing, using several plugins that do this can bog down your site with loads of requests for these files. [...]
excellent as always !
I’m goonna check the Disabling javascript, I have to fix something around that using that snipe..
[...] уроке Джастина Тэдлока описывается довольно таки хорошее [...]
Please pardon the clueless here but: “deregister as many stylesheets as you need”
I can get one stylesheet to “de-regester” but I can not figure out the syntax to de-regester 2 stylesheets without breaking functions.php.
I guess I’m looking for an example with 2 de-regestered stylesheets.
Thanks, S
@Stefan: Did you try listing each handle as follows:
@Kim: Yes i did, whatever handle is in the second spot (cleaner-gallery in your example) is still being requested when I look in firebug at the css requests for that page.
I thought perhaps I was missing a space or something but no joy. I even swapped around the handle’s and only the first one is no longer requested.
I am trying to de-regester wp-postratings, theme-my-profile and theme-my-login, anyone of these in the first position gets de-regestered second one is still requested.
It must be my syntax though I copied the examples………hmmmm.
A great read thank you, I have only just started playing around with wordpress and your tips have come in handy,
@Stefan, did you find a solution to de-registering more than one script? I can’t figure it out either.
Of course, as soon as I ask the question, I figure it out. Very simple:
I can put in the header instead of the functions.php?
Or put the function in functions.php and add_action the header?
@Jack: You would add all of that code to your functions.php file, and it will remove the javascript from the header automatically. You don’t need to edit your header.php file at all.
Is it possible, using this method, to prevent NextGen gallery from inserting the version number into tags?
[...] Source: How to Disable Scripts and Styles – Justin Tadlock [...]
[...] man über ein paar Zeilen Code in der functions.php unterbinden. Wie das funktioniert, erklärt Justin Tadlock. Für diese Maßnahme ist einiges an Handarbeit inklusive Code-Analyse der Plugins [...]
[...] Credit To : How to disable scripts and styles [...]
Ooh excellent post. I didn’t know that this was possible. I was always afraid to mess with the plugins for fear of breaking it altogether. Time to go mess with my site and hope I don’t break it to bad.
[...] I found this interested article from Justin Tadlock that realized me a quick and elegant way to disable scripts or styles enqueued [...]
Nice post, for those who weren’t advanced in programming, especially web programming.
Thanks for posting this Justin. I just added the WP Navi deregister to my list of useful Thematic filters- even though it’s only sorta related. Too useful to leave off though: http://wordpresstheming.com/2009/10/useful-thematic-filters/.
This worked great: but is there a way to enable it only on certain templates instead of the exact page? For instance if I want a certain script to be allowed on single.php pages?
Thanks in advance! I’m still wrapping my head around much of this code!
@Ben for sure i’ve just done this, based on J Mehmett’s great comment (the 2nd comment)
Based on your example:
if(!is_single()){
wp_deregister_script(‘the-script’);
}
So if the page is not single.php the script will be de-registered!
[...] Eine ausführlichere Beschreibung zu diesem Thema liefert: justintadlock.com/archives/2009/08/06/how-to-disable-scripts-and-styles [...]
[...] dan rumit, karena harus mengedit file plugin yang dipakai. Informasi lengkap bisa dibaca di blog Justin Tadlock, White Shadow, dan Coen [...]
[...] Tadlock on his blog, offers a more in depth tutorial regarding this [...]
[...] is the snippet of code that got me started, from Justin Tadlock’s blog post; it will disable Contact Form 7’s loading [...]