How to Remove Plugin Scripts & Stylesheets in WordPress

How to Remove Plugin Scripts & Stylesheets in WordPress Tutorials

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 (short for initialise). Inside that file I did a quick search for .js and found a WordPress enqueue going on where those unwanted files were being added, 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’s incredibly annoying when you have scripts being loaded from somewhere but no matter what you try 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 you’re still having trouble getting rid of any unwanted files please ask for my help below!

Advertisement


Leave a Comment

Comments (6)

sam

28th, Apr 2015 at 2:06 am

Hi there im a bit of a noob so sorry for my ignorance. I have been searchimg for.weks for an answer to this external JavaScript answer. Im having trouble with jetpack inparticular and getting blocked css? Could you please explain where to add option ome code to exacttly so I can give it a try.

Thanks

Reply

Johann

26th, Oct 2015 at 9:11 pm

Hi,

I’m not having any success with those two methods…
Need to remove a css that’s causing problems on a self-hosted CDN (and don’t need it since I’m using a bootstraped version).

Here’s the culprit in the functions.php :

[php]
if (!function_exists(‘qode_styles’)) {
function qode_styles() {
wp_enqueue_style(‘qode-font-awesome’, QODE_ROOT . ‘/css/font-awesome/css/font-awesome.min.css’);

I tried both (in the child theme) :
remove_action(‘wp_head’, ‘qode-font-awesome-css’);

function remove_scripts_styles_header() {
wp_deregister_style(‘qode-font-awesome’);
}
add_action(‘wp_header’, ‘remove_scripts_styles_header’);
[/php]

Any idea why that could not work ? Did I do it wrong ?
(of course I made sure to rebuild the cache before checking ­čśë
Thanks for your help !

Reply

Selvam

12th, Nov 2015 at 12:06 pm

Nice and handy post, but there is a WordPress plugin called, WP Remove Css – Js WordPress plugin https://wordpress.org/plugins/wp-remove-css-js/ does the trick without any manual coding. It is very handy.

Reply

rabin

3rd, Dec 2016 at 3:27 am

how to hide viewer js frame from my page?
i want that viewer js to work but i don’t want that viewer js frame in my website.
So any answers?

Reply

Cplink

1st, Mar 2017 at 5:49 am

Hi.. I upload my website www.clippingpathlink.com but it is not working. Please help me with full instructions. Thanks

Reply

Paulo

12th, May 2018 at 3:47 am

Hello what is different from Header cleanup plugin?? https://wordpress.org/plugins/header-cleanup-littlebizzy/

that is from scripts or not? thanks

Reply

Pingbacks (3)

[…] How to Remove Plugin Scripts & Stylesheets in WordPress […]

[…] Nas─▒l WordPress Plugin Scripts & stil sayfalar─▒ ├ž─▒karmak i├žin […]

[…] Nas─▒l WordPress Plugin Scripts & stil sayfalar─▒ ├ž─▒karmak i├žin […]

Advertisement

Inspirational Newsletter

Join the newsletter to get the best articles, tutorials and exclusive freebies every two weeks.

No spam. You can unsubscribe at any time.