How to Disable CSS and JavaScript Added by Plugins
One of the most annoying things in the WordPress universe are plugins and themes that don’t conditionally load their scripts and styles (i.e., JavaScript and CSS files). For example, you install a dashboard plugin and it loads its scripts in the entire Admin Area and the frontend. Instead, the developer should have used conditional logic to NOT load the script on the frontend (e.g., via !is_admin()), or anywhere in the Admin Area EXCEPT the dashboard (e.g., via get_current_screen()). It’s just basic human decency.
Unfortunately, a LOT of plugins FAIL when it comes to conditional loading of assets. They just spit them JavaScripts and CSS files all over the place, across every page on the site. And that my friends is frustrating. Especially when performance matters and you’re trying to optimize loading of script and style.
Fortunately, WordPress makes it easy to disable any unwanted scripts or styles. So let’s put an end to the nonsense and disable any unwanted CSS and JavaScript files. This tutorial explains how to do it in TWO steps.
Quick Nav
Step 1: Get the ID
The first thing we need is the specific ID for the script or style that we want to disable. There are numerous ways of getting this information, from easiest to 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
- Educated guess then ask
In theory, you can just go through the list until you find the ID. In practice, however, finding script/style IDs is more an art form, trial and error until it works kind of thing. So basically just use that list as a guide and try each technique until you get the desired ID. This is a critical step for any script or style that you want to disable. Let’s take a moment and go through each technique..
Check the script or style tag
The easiest way to get the ID is to just examine the <script> or <style> tag in the markup of your web page. For example, let’s say we want to disable EDD plugin styles. Looking at the source code of one of our pages, we find the style tags output 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 are the id attributes. We have the following ID values:
media-styles-cssdefault_styles-cssedd-styles-css
Seems straightforward, right? Wrong. If you try to use these IDs to disable or dequeue the associated styles, it won’t work. Why? Because those values are NOT the actual style IDs. Nope. 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-stylesdefault_stylesedd-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 in Step 2.
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/2018/08/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 it working? Just add 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 skillz and get to work. Tip: search for the file name and path, and/or just the file name, should yield some results to go from.
Another good strategy is to search for the names of WordPress functions that may be used to add the unwanted script or style. For example, search for wp_enqueue_script(), wp_register_script(), and friends.
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 pretty good chance that the correct ID is going to be 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.
Step 2: 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 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 would 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 of a JavaScript file, we instead would 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
In my latest site redesign, I removed a bunch of plugins and scripts that no longer were needed. After cleaning up my plugins, I no longer needed to explicitly disable any CSS or JavaScript files. Thus, I was able to 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 style 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
And last but not least, here are two examples that demonstrate an important point. Not all functions register and enqueue CSS and JavaScript files as recommended. And in those cases, the previously prescribed methods may not work. So sometimes we have to get creative with alternate methods and hooks to use. Here is a good 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);For whatever reason, the only way I could disable this particular plugin’s stylesheet was to use wp_deregister_style() hooked into wp_print_styles. Whatever it worked. To be fair, I didn’t have a lot of time to fiddle around with unwanted plugin styles, so there may be some sort of rational explanation.
And the second example is even more unusual. Observe:
// had to use the get_footer hook!!!
function shapeSpace_disable_yarpp_styles() {
wp_dequeue_style('yarppRelatedCss');
}
add_action('get_footer', 'shapeSpace_disable_yarpp_styles');Notice the hook used here: get_footer!!! Whaaaa…? Truly bizarre but it was the ONLY thing that would work to disable the unwanted YARRP styles. Not sure if I would recommend this technique on any other live site, just because it feels kinda weird using wp_dequeue_style() via the get_footer hook.
That’s all for now, Thank you for visiting :)
About the author
Jeff Starr is a professional web developer and book author with over 15 years of experience. Jeff works with WordPress every day, designing themes, developing plugins, and securing sites. His books include Digging Into WordPress, WordPress Themes In Depth, and The Tao of WordPress.
8 responses
-
Nice summary and great tips, thanks!
One other thing I’ve found helpful when cleaning up plugin styles is the conditional
wp_style_iswhich checks to see if a stylesheet is enqueued, so I can conditionally remove it and load my own scripts. For instance:// Check for Better Font Awesome plugin's version of Font Awesome, which is old; // If exists dequeue it and enqueue our v4 shim which handles the old 'fa' class if (wp_style_is('bfa-font-awesome', $list = 'enqueued')) { wp_dequeue_style('bfa-font-awesome'); wp_enqueue_style('fwp-fontawesome-css-shim'); }-
Jeff Starr Post AuthorAwesome tip, thank you Michelle!
-
-
I wonder if ‘yarppRelatedCss’ is enqueued after the header is output (after wp_head action) and therefore can only be output in the footer.
I have seen situations where a shortcode includes a CSS file. Instead of loading the file on every page, it is enqueued when the shortcode is being rendered. The CSS file ends up in the footer.
-
Jeff Starr Post Author
Possibly but remember that enqueue function provides an
$in_footerparameter that determines whether the script is included in the header or footer. Could be that yarpp has this set totrue.
-
-
Great post!
Another tip is using
PHP_INT_MAXfor priority instead of using a fixed number. It makes sure the code runs after everything that hooked before.-
Jeff Starr Post Author
Thanks Anh! Awesome tip :)
-
-
I was stuck on a mysterious google fonts css, I could not find it enqueued in a new theme I was trying, but it was coming up 404 on the chrome console! Thanks for your tip to remove the -css, worked perfectly to dequeue the style.
-
Todd Jonescan you recommend an approach to not load scripts on the frontend home page (or another landing page) to expedite page loading, while allowing scripts to load upon visiting the page where they’re needed? thanks
