How to Remove Plugin Scripts & Stylesheets in WordPress

WordPress plugins are great because they give extra functionality you don’t normally get “out of the box”. A few of my favourites that I use on this site are WordPress SEO and Broken Link Checker. They provide your site with a huge amount of power and allow you to do some amazing things (not to mention 90% of them are free).

When you install a WordPress plugin like Jetpack you’ll find some it adds a bunch of unnecessary JavaScript and CSS files to your site. This can really hammer performance, especially for mobile users who are on 3G connections.

To check if any JavaScript or CSS files are being added to your site, go to your site, right-click and go to View Source. From there have a look in the header and footer areas of your site to see if there are any unwanted files being added.

---

1.) First Option: Deregister

The first step is to use the wp_deregister_style(); and wp_deregister_script(); functions.

This option should work in 90% of cases because it goes hand-in-hand with the recommended way of including your themes JS and CSS files. The recommended way being wp_enqueue.

You may need to change the part that says wp_footer to wp_head depending on where the files are being added. Here’s how to set it up if you’re looking to remove some of the stuff added by Jetpack.

function remove_scripts_styles_footer() {
	//----- CSS
	wp_deregister_style('jetpack_css'); // Jetpack

	//----- JS
	wp_deregister_script('devicepx'); // Jetpack
}

add_action('wp_footer', 'remove_scripts_styles_footer');

2.) Second Option: Remove the Action

Sometimes plugins don’t like playing nice when you’re trying to remove the files they’ve added. If you’re still struggling to figure out a way of removing scripts and styles when deregistering has failed you, this could be the function for you.

I’ve found the remove_action(); function to be very helpful because, as it turns out, some plugin developer don’t use the wp_enqueue as they should.

Where it says devicepx you just need to add the html ID that’s added to the JS or CSS files, you can see this by viewing the source, like I mentioned in the intro. For the Jetpack example you would put jetpack_css or devicepx.

remove_action('wp_head', 'devicepx');

3.) Third Option: Digging Through Files

At some point you’ll come across a plugin that doesn’t give you output an ID of the script or stylesheet that’s been added. To find the ID you’ll have to root around in the plugin files…but don’t worry, the file names are usually a good indicator of where to look.

This may seem a little beyond you but it’s not anywhere near as scary as it looks. I advise using the search and replace tool in your code editor of choice. It’s usually accessed by holding CTRL/Command + F.

An Example: WordPress Related Posts

When I set-up the related posts feature on this site (see below this tutorial for an example) I decided to use a plugin called WordPress Related Posts by Zemanta. It works great but unfortunately adds some of those unwanted JS and CSS to the page.

I went into the plugin folder and saw a file called init.php. Inside that file I did a quick search for .js and found a WordPress enqueue going on where those unwanted files were being added. As a result I was then able to stop that file being loaded, here’s an extract of the code:

function wp_rp_head_resources() {
	if (current_user_can('edit_posts')) {
		wp_enqueue_style('wp_rp_edit_related_posts_css', $theme_url . 'edit_related_posts.css', array(), WP_RP_VERSION);
		wp_enqueue_script('wp_rp_edit_related_posts_js', $static_url . 'js/edit_related_posts.js', array('jquery'), WP_RP_VERSION);
	}
}

add_action('wp_head', 'wp_rp_head_resources');

So in my functions.php I used the remove_action(); function. I then went back to the page and those unwanted JS files were gone!

remove_action('wp_head', 'wp_rp_head_resources'); // Related Posts

---

Conclusion

External JavaScript files are rending blocking, which means nothing else will be downloaded until those files are done. This isn’t so much of a problem if your JavaScript files are included in the footer of your site but you can’t always trust plugin developers to do that. However, it’s still an extra HTTP request, so it’s best to remove them.

It can be incredibly frustrating when you have scripts being loaded, yet no matter what you do nothing seems to remove them. A quick Google search can lead to a handful of different blog posts, all giving you the same answer. Nearly every article you find will recommend using wp_deregister_script();, but sometimes that answer doesn’t work.

I hope the above methods have helped you get rid of those pesky plugin files that are dragging down your website’s performance. If there’s still a few files giving you trouble give me shout in the comments!