There are many plugins that tend to automatically add their JS and CSS files to all posts and pages of your blog even though you might be using the plugin's functionality only on one or two pages.
For instance, a gallery plugin. You might have the gallery only on one page of your site, yet the plugin loads the required JS and CSS files on all pages. This is counter-productive and can negatively effect your site's performance and page load speeds.
The good thing is that you can easily prevent this from happening by restricting a plugin's scripts and styles only to specific posts and pages using the wp_dequeue_script and wp_dequeue_style functions. Here's how.
Table of Contents
1: Finding the Plugin Handles
The first step is to find the unique handles of plugins that you want to restrict.
You can do this by digging into the plugin files, but that can be a time consuming and frustrating thing to do.
Instead here's a simple workaround:
Step 1: Open your theme's functions.php file and add the following function to the end of the file.
# Finding handle for your plugins
function display_script_handles() {
global $wp_scripts;
if(current_user_can('manage_options')){ # Only load when user is admin
foreach( $wp_scripts->queue as $handle ) :
$obj = $wp_scripts->registered [$handle];
echo $filename = $obj->src;
echo ' : <b>Handle for this script is:</b> <span style="color:green"> '.$handle.'</span><br/><br/>';
endforeach;
}
}
add_action( 'wp_print_scripts', 'display_script_handles' );
Note that this function will output the script source followed by the handle, to the top of your webpage, for all scripts that are enqueued using the wp_enqueue_scripts function.This will only work when you are logged in as admin. So regular site visitors will not be able to see this.
Step 2: Once you have added the function and saved your functions.php file, visit any single post page of your site (while you are still logged in as an admin). You should now be able to see the source of all scripts that have been enqueued to load along with the handles on the very top of the page as shown in the image below:
As mentioned earlier, regular site visitors will not be able to see this.
2: Restricting Scripts and Styles to Specific Posts and Pages
Now that we have the plugin handles, we can easily prevent these plugins from loading CSS and JS files on all pages and restrict them only to pages that we want by using the wp_dequeue_script() and wp_dequeue_style() functions as follows:
wp_dequeue_script('script-handle'); wp_dequeue_style('script-handle');
Let's look at a working example to see this in action.
Example: Let's take the contact form 7 plugin. This plugin loads its JS and CSS files on all posts and pages of your site even though you might be adding the contact form only on one or two pages.
To restrict this plugin, we first start by finding the plugin's handle which is contact-form-7. Now let's say we want to allow the plugin to load it scripts and styles on all pages of your site but not the posts. We can achieve this by adding the following function to your theme's functions.php page.
# Restrict scripts and styles
function conditionally_load_plugin_js_css(){
if(! is_page() ) { # Only load CSS and JS on Pages but not on Posts
wp_dequeue_script('contact-form-7'); # Restrict scripts.
wp_dequeue_style('contact-form-7'); # Restrict css.
}
}
add_action( 'wp_enqueue_scripts', 'conditionally_load_plugin_js_css' );
To be even more specific, let's say you have the contact form on two pages on your site and the Id of these pages are 4 and 12. You can restrict the plugin to only these two pages by adding a comma separated list of IDs in an array to the is_page() function as follows:
function conditionally_load_plugin_js_css(){
if(! is_page( array(4,12) ) ){ # Load CSS and JS only on Pages with ID 4 and 12
wp_dequeue_script('contact-form-7'); # Restrict scripts.
wp_dequeue_style('contact-form-7'); # Restrict css.
}
}
add_action( 'wp_enqueue_scripts', 'conditionally_load_plugin_js_css' );
In a similar way, you can restrict the JS and CSS to specific single posts, by using a comma separated list of single post IDs as follows:
if(! is_single( array(12,14,22) ) ) # Load CSS and JS only on Single Posts with ID 12, 14 and 22.
If you want to restrict the plugin to posts with ID's 5 and 6 and Pages with ID 12 and 14, you can use the following:
if(! is_single( array(5,6) ) && ! is_page( array(12,14) ) )
This way, you can couple several if statements with several wp_dequeue_script and wp_dequeue_style functions to restrict scripts and styles from various plugins to specific posts and pages.
Restricting plugins this way can reduce HTTP requests and help speed up your page loads which will in-turn save bandwidth and improve site rankings. You can also use async and defer attribute to prevent render blocking javascript from slowing down your page load times. Check out this article to know how you can add the defer or async attribute to your script tags.
WordPress.org - How to find your scripts handle?
Stackexchange - How do I get the handle for all enqueued scripts?
Stackexchange - Get list of scripts and show file which enqueued them?
wordpress.org - Action Reference: wp_enqueue_scripts
WordPress.org - Function Reference: wp_dequeue_style
WordPress.org - Function_Reference: wp_dequeue_script
Love that way of finding script handles to de queue!
Great documentation and process.
IF(?) I read it all correctly, your script 1) identifies specific class/code/postID/pageID/ then 2) Turns OFF those scripts for those class/code/postID/pageID.
I have need to restrict scripts to specific pages, thereby turning OFF for ALL but those specified. Wouldn't that require some sort of call to NOT turn OFF for those class/code/postID/pageID.
Maybe I read it wrong?
answered my own question - that's what the "!" does :) thanks for this great reference!
Many thanks for this great tutorial; I have spent the day trying lots of others and this one worked AND explained matters clearly. I have tweeted and Google+ shared.
What if i have multiple plugins to block. what changes need in script?
Hi Pmwarman, the code given is to block multiple plugins.
Excellent post, well written and easy to understand. Quickly fixed an issue I've been struggling with for ages, thanks!!
What about enqueued styles ?
All I can see is handle for this script is : $handle
What does that mean?
What about the handlers for enqueued styles?
Thanks for the tutorial! This is the best version I've found online, and I've finally achieved what I wanted to do. As for the handlers for enqueued styles, somehow they didn't come up by following the above (like other comments say), but found a resource mentioning it (goo.gl/SpqFkT).
Thank you Joey, I am glad you found it useful. As for the handlers, I rechecked the code and it seems to be working fine for me. Note that the code only works when you are logged in as the site admin.
I have seen that this method doesn´t work with old plugins. I´m trying with Bookshelf slider
https://codecanyon.net/item/multipurpose-bookshelf-slider-wordpress-plugin/2228996
Best content. For the new blogger.
The line that says:
if(current_user_can('manage_options') && ! is_admin()) {
actually does NOT allow admins to see this information.
The IF statement says that the user must have manage_options ability but must NOT be an admin.
So it should be either this:
if( is_admin() ){
Or this:
if( current_user_can('manage_options') ){
Thanks for catching that Jeff. Corrected now.
This script only shows Javascript that is queued and does not list any style css at all.
Thanks
Jeff, every plugin has a unique 'handle'. The first script helps you identify this handle. Once the handle is identified, you can then block the plugin from loading Javscript as well as CSS using the wp_dequeue_script() and wp_dequeue_style() functions.
This is incredibly well explained, valuable information, and difficult to find elsewhere. Thank you for sharing this, Mukesh.
I should add that for me (even though I am an Admin and logged in), I could not get the handles list to show up until I removed the is_admin condition from the if statement. Using the current_user_can ... condition alone, was the only way I could get them to show up. Must be something about my set up, but if others have problems, they could try this.
Thank you Chris. Will check the code once again and see why is_admin is not working. Thanks for the heads up.
Very well explained!, and good trick to find the script handle.
Thanks!
Excelente, me sirvió mucho. Muchas gracias!
Doesn't seem to be working for me. I found another post that says the same: https://wordpress.org/support/topic/dequeue-script-for-preventing-recaptcha-v3-does-not-work-anymore/
Any suggested updates?