Conditionally loading plugin scripts in WordPress

I’m a big fan of WordPress – it’s both easy to use as an author and easy to develop for. There are also a huge amount of free (and paid) plugins to extend the core functionality.
Unfortunately there is a downside – most plugins do not conditionally load their files only on pages that call them. It is all to easy to end up with every page loading a string of Javascript and CSS files slowing the site to a crawl, when they are only actually required on specific pages.

I’m going to show 2 quick examples of how to use the functions.php file in your theme to only load the scripts for a plugin on a specific page using deregister and remove_filter, which are built into WordPress.

Example 1

Let’s start with Contact Form 7 – this is a great plugin to give very customisable and extendable contact forms.
In functions.php, just add:

// Remove Contact Form 7 CSS + JS form all pages except Contact
add_action( 'wp_print_scripts', 'deregister_cf7_javascript', 15 );
function deregister_cf7_javascript() {
    if ( !is_page(15) ) {
        wp_deregister_script( 'contact-form-7' );
    }
}
add_action( 'wp_print_styles', 'deregister_cf7_styles', 15 );
function deregister_cf7_styles() {
    if ( !is_page(15) ) {
        wp_deregister_style( 'contact-form-7' );
    }
}

This will first prevent the Javascript, and then the CSS file from being loaded unless the Page ID is 15 (obviously change this to the ID of your Contact page or wherever you use the script – to get this open the page for editing in the dashboard and look at the URL).
The names deregister_cf7_javascript and deregister_cf7_styles – both mentioned twice) are arbitrary, just make sure they are unique. However contact-form-7 is set by the plugin and may be different between the Javascript and CSS files.
However this will still be calling an extra CSS file when really you could (should) just include the code in your main style.css. So take it a step further and remove the if statement from the 2nd part to never load the Contact Form 7 stylesheet and always use your own:

add_action( 'wp_print_styles', 'deregister_cf7_styles', 15 );
function deregister_cf7_styles() {
    wp_deregister_style( 'contact-form-7' );
}

Example 2

Next let’s look at Slickr Flickr – another popular plugin for displaying Flickr galleries on your site.
This is slightly more complicated as this plugin uses a filter to load it’s initialising script and also exactly which scripts it tries to load will vary on your settings. This example is based on having selected Load Scripts in the Footer and use Thickbox as the Lightbox as this is quite a common use.

// Remove Sickr Flickr JS files from all pages except Gallery + CSS from all pages.
add_action( 'wp_print_scripts', 'deregister_slickrflickr_javascript', 17 );
function deregister_slickrflickr_javascript() {
    if ( !is_page(17) ) {
        wp_deregister_script( 'slickr-flickr' );
    }
}
add_action( 'wp_print_scripts', 'deregister_slickrflickrstart_javascript', 17 );
function deregister_slickrflickrstart_javascript() {
    if ( !is_page(17) ) {
        remove_filter( 'print_footer_scripts', 'slickr_flickr_start',100 );
    }
}
add_action( 'wp_print_scripts', 'deregister_thickbox_javascript', 17 );
function deregister_thickbox_javascript() {
    if ( !is_page(17) ) {
        wp_deregister_script( 'thickbox' );
    }
}
add_action( 'wp_print_styles', 'deregister_slickrflickr_styles', 17 );
function deregister_slickrflickr_styles() {
        wp_deregister_style( 'slickr-flickr' );
}

As before, 17 should be replaced with the ID of the page where you are displaying your gallery. One important thing here is that the remove_filter statement has 3 variables specified when only the first 2 are compulsory. This is because the plugin is specifying a non-default priority (100 and so you must specify it here also otherwise it won’t work.

Wrap up

With deregister and remove_filter in your armoury you can significantly speed up your site making for a much better user experience.
If you want to take it further – you could use this as the basis for concatenating your scripts into a single .js file (or 1 per library if you are using multiple ones) – just remove the conditional statements to always prevent loading. Then register and load your own file in their place. Just remember to keep it up to date as the plugins get updated!
Don’t forget, HTTP requests are expensive – always bundle your CSS together and if possible your Javascript too.

One caveat with this is that not all plugins are coded according to the guidelines – they may not register their scripts making this potentially useless. However you should be OK with the popular ones – even if you have to look in the code to see whether you need to use deregister or remove_filter.

Category:

Tags:

5 responses to “Conditionally loading plugin scripts in WordPress”

  1. Gas Oved avatar

    I was just looking if someone had tried conditionally load Contact Form 7’s js and css. Thanks a lot. 🙂

  2. […] contact forms. But this plugin queues its CSS and JS files on every page load. I found a tutorial here that shows you how to deregister the scripts. But the homepage for the plugin provides its own […]

  3. […] What’s the Remedy: Only load your scripts when necessary to keep your website running smooth and fast.Here is how you can do this via a very common example by Phil Bank’s tutorial on Loading plugin Scripts During WordPress Development. […]

  4. Tomasz avatar

    It’s been a while but here’s more elegant alternative to conditionally enable/disable CSS and JS files without touching line of code: https://tomasz-dobrzynski.com/wordpress-gonzales

  5. Crack Software Download avatar
    Crack Software Download

    Lots of lots of information. And Nice Sharing #Tomasz.

Leave a Reply

Your email address will not be published. Required fields are marked *