Conditionally Loading Scripts And Styles For WordPress Plugins
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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
# 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.
Note: Remove this function from your functions.php page once you are done noting down the handles for your plugins.
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:
|
1 2 |
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.
|
1 2 3 4 5 6 7 8 |
# 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:
|
1 2 3 4 5 6 7 |
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:
|
1 |
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:
|
1 |
if(! is_single( array(5,6) ) && ! is_page( array(12,14) ) ) |
Note: To get ID of a post or page, open the post/page for editing in your wordpress dashboard. You will now be able to see the ID number in the URL. (eg: post=145 or page=45)
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.
Note: make sure to add this function to the end of your functions.php page or after the wp_enqueue_scripts() function.
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.
Napsat komentář