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:

1. Combine multiple files into single files (mileage may vary with JavaScript here).
2. Load the files only on the pages we’re using the script or style.
3. Stop having to use !important in our style.css file 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.css file 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.