How to Disable CSS and JavaScript Added by Plugins in WordPress

Updated on Dec 8, 2022

WordPress plugins and themes that do not load their scripts and styles conditionally can be extremely inconvenient. When it comes to conditional asset loading, many plugins can fail. They include JavaScript and CSS files in the upload to your WordPress database. This is especially aggravating because performance is critical, and you generally try to optimize script and style loading.

Thankfully, WordPress makes it simple to disable any unwanted scripts or styles. So, let's put an end to this nonsense by turning off any unnecessary CSS and JavaScript files. This tutorial will walk you through the process in TWO steps.

Table of Contents:

How to Get the ID

How to Dequeue Script or Style
Examples

How to Get the ID

The first thing we need is the ID of the script or style we want to disable. There are several ways to obtain this information, ranging from the simplest to the most time-consuming:

Check the <script> or <style> tag;
Use a script/style-inspector function like the one below;
Locate the source code responsible for adding the script.

In theory, you should be able to scroll through the list until you find the ID. Finding script/style IDs is more of a trial-and-error process in practice. Simply use that list as a guideline and try each technique until you obtain the desired ID. This is a required step for any script or style that you want to disable. Let's go over each technique one by one.

Check the Script or Style Tag

The simplest way to obtain the ID is to examine the Script> or Style> tag in your web page's markup. Let's say we want to disable the EDD plugin styles. Looking at the source code of one of our pages, we notice the following style tags in the head> section:

<link rel='stylesheet' id='media-styles-css'   href='https://example.com/wp/wp-content/themes/example/lib/css/media.css' type='text/css' media='all' />
<link rel='stylesheet' id='default_styles-css' href='https://example.com/wp/wp-content/themes/example/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='edd-styles-css'     href='https://example.com/wp/wp-content/themes/example/lib/css/edd.css' type='text/css' media='all' />

Here we have three style tags, each loading a separate CSS file. The key thing to notice here is the id attributes. We have the following ID values:

media-styles-css;
default_styles-css;
edd-styles-css.

Keep in mind that if you try to use these IDs to disable or dequeue the associated styles, it won't work. That's because those values are NOT the actual style IDs. WordPress appends -css ("dash css") to the actual ID values. Applying this esoteric bit of knowledge, our list of style IDs now looks like this:

media-styles;
default_styles;
edd-styles.

So now we have the correct ID for the unwanted EDD stylesheet, edd-styles. Let's remember that value, as we'll be using it.

Use a script/style-inspector Function

The previous method of getting the ID is the easiest. But the problem is that WordPress does not include an id attribute on <script> tags. So to get the ID of any unwanted scripts, we can use a simple "script-inspector" function like such as this little number by yours truly:

/*
Get Script and Style IDs
Adds inline comment to your frontend pages
View source code near the <head> section
Lists only properly registered scripts
@ https://digwp.com/2019/03/disable-script-style-added-plugins/
*/
function shapeSpace_inspect_script_style() {
global $wp_scripts, $wp_styles;
echo "\n" .'<!--'. "\n\n";
echo 'SCRIPT IDs:'. "\n";
foreach($wp_scripts->queue as $handle) echo $handle . "\n";
echo "\n" .'STYLE IDs:'. "\n";
foreach($wp_styles->queue as $handle) echo $handle . "\n";
echo "\n" .'-->'. "\n\n";
}
add_action('wp_print_scripts', 'shapeSpace_inspect_script_style');

How is it working? Add it to your theme's functions.php file, upload, and refresh the page. No modifications are required unless you want to spice it up. As-is, the function will display a list of all properly registered script and style IDs. So in your markup in the <head> section, look for something like this:

<!--
SCRIPT IDs:
jquery
jquery-migrate
edd-checkout-global
edd-ajax
STYLE IDs:
media-styles
default_styles
edd-styles
-->

And these are the actual IDs, nothing appended or anything weird. So hopefully, the unwanted script or style is listed here, so you can get the ID using this method and then proceed to Step 2.

Locate the source code responsible for adding the script

If neither of the previous techniques works, an effective way to get the ID is to grep through the actual plugin source code. There are many strategies for searching through plugin files and code, so use your search skills and get to work. Search for the file name and path, and/or just the file name, which should yield some results.

Another good strategy is to search for the names of WordPress functions that may be used to add unwanted scripts or styles. For example, search for wp_enqueue_script(), wp_register_script(), and friends.

Make an Educated Guess, Then Ask

If all else fails, take a guess. Look at the actual file name that you want to exclude. For example, if you have this:

<script type='text/javascript' src='https://example.com/wp/wp-content/plugins/amazing-plugin/assets/js/amazing-plugin.min.js?ver=1.2.3'></script>

There is a good chance that the correct ID will be an amazing plugin or something similar. If not, and/or if all else fails, ask the developer.

Surely the developer will be able to provide proper script and style IDs.

How to Dequeue Script or Style

Once you have the correct ID, actually disabling the script or style is straightforward. Going with the EDD example, the ID of the unwanted stylesheet is edd-styles. So to disable, we can add the following to our theme's functions.php file:

// disable stylesheet (example)
function shapeSpace_disable_scripts_styles() {
wp_dequeue_style('edd-styles');
}
add_action('wp_enqueue_scripts', 'shapeSpace_disable_scripts_styles', 100);

Done. With this code in place, the EDD stylesheet will not be loaded on any frontend page. We know that it's the front-end only because of the particular action hook we are using, wp_enqueue_scripts. If we want to disable stylesheets in the Admin Area, we instead will use admin_enqueue_scripts.

The only other secret here is the WordPress function used to disable the stylesheet, wp_dequeue_style(). If we want to disable adding a JavaScript file, we instead will use wp_dequeue_script(). Hit those links for more details on any of these excellent functions.

Examples

Now that we understand how everything works, here is my growing collecting of real-world examples of disabling CSS and JavaScript added by plugins.

Disable Script and Style on Frontend

After cleaning up your plugins, you no longer need to explicitly disable any CSS or JavaScript files. Thus, you can remove the following function:

function shapeSpace_disable_scripts_styles() {
// easy digital downloads
if (!is_page('checkout') && !is_page('purchase-confirmation') && !is_page('purchase-history') && !is_page('transaction-failed')) {
wp_dequeue_script('edd-ajax');
wp_dequeue_script('edd-password-meter-passfield-locales');
wp_dequeue_script('edd-password-meter-passfield');
wp_dequeue_script('edd-password-meter');
wp_dequeue_style('edd-sl-styles');
wp_dequeue_style('edd-password-meter-passfield');
wp_dequeue_style('edd-password-meter');
}
// super stripe plugin
if (!is_page('direct') && !is_page('custom') && !is_page('cancel') && !is_page('success')) {
wp_dequeue_script('supstr-aweber-js');
wp_dequeue_script('supstr-shortcode-js');
wp_dequeue_script('supstr-validate-js');
}
// search everything
wp_dequeue_style('se-link-styles');
remove_action('wp_head', 'se_global_head');
// yet another related posts plugin
wp_dequeue_style('yarppWidgetCss');
}
add_action('wp_enqueue_scripts', 'shapeSpace_disable_scripts_styles', 100);

This function disables various scripts and styles otherwise added via EDD, Super Stripe, Search Everything, and YARPP. It felt really good cleaning up all of that mess. As a bonus, notice the use of remove_action() to remove the unnecessary Search Everything stuff from the <head> section.

Disable Script and Style in Admin Area

Next, here is a function that disables some plugin styles in the Admin Area:

function shapeSpace_disable_scripts_styles_admin_area() {
wp_dequeue_style('jquery-ui-css');
}
add_action('admin_enqueue_scripts', 'shapeSpace_disable_scripts_styles_admin_area', 100);

As explained previously, the key to targeting the Admin Area is using the admin_enqueue_scripts hook.

Disable Script and Style Elsewhere

Finally, here are two examples that illustrate an important point. Not all functions properly register and enqueue CSS and JavaScript files. In such cases, the previously prescribed methods may fail. As a result, we must sometimes be inventive with alternative methods and hooks. Here is an example:

// via the wp_print_styles hook
function shapeSpace_disable_download_manager_styles() {
wp_deregister_style('dlm-frontend');
}
add_action('wp_print_styles', 'shapeSpace_disable_download_manager_styles', 100);

The only way we could disable this particular plugin's stylesheet was to use wp_deregister_style() hooked into .wp_print_styles.

Contact us for Assistance

In case you need help, don’t hesitate to contact our technical support team for assistance. All you have to do is submit a new support ticket.

We hope you find this article useful. Discover more about FastCloud - the top-rated Hosting Solutions for personal and small business websites in four consecutive years by the HostAdvice Community!

WordPress Hosting

Free WordPress Installation
24/7 WordPress Support
Free Domain Transfer
Hack-free Protection
Fast SSD Storage
Free WordPress Transfer
Free CloudFlare CDN
Immediate Activation