Conditional Script Loading with WordPress

March 4, 2016
jquery wordpress performance

You’re building a plugin that uses a popular jQuery plugin. What if, instead of loading the script right away you want to check if that script is already loaded by the theme or another plugin?

Check if a jQuery plugin is loaded

Fortunately for us, it’s easy as a pie to detect if a jQuery plugin is loaded. Take a look at the code:

if (jQuery().magnificPopup) {
    // magnificPopup is loaded
} else {
    // magnificPopup is NOT loaded  
}

Load a script using jQuery

Now that we’re able to check if a specific jQuery script is loaded, let’s create the fallback. To load the jQuery plugin when it’s not already enqueued, we will use the jQuery.getScript() function. This laods a JavaScript file from the server using a GET HTTP request, then execute it.

By default, $.getScript() sets the cache setting to false. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested. Let’s make sure the jQuery plugin gets cached.

$.ajaxSetup({
    cache: true
});
$.getScript('//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', function () {
    // magnificPopup is loaded
});

In the above example, I’m loading the script from a CDN. I wouldn’t recommend this method if you’re developing a plugin that will be hosted on WordPress.org. Scroll down to see how to load a local script using jQuery.getScript() function.

Load a stylesheet using jQuery

If the jQuery script isn’t loaded, its associated stylesheet is most likely not loaded either. Loading a stylesheet with jQuery is extremely simple. Take a look at the code:

$('<link/>', {
    rel: 'stylesheet',
    href: '//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css'
}).appendTo('head');

Passing PHP variables to JavaScript with WordPress

Back in 2010, Otto wrote a great guide on how to do this effectively. Therefore, I won’t go into details.

<?php
function pluginLoaded_scripts() {
    // Enqueue a script with jQuery as a dependency.
    wp_enqueue_script( 'pluginLoaded', get_template_directory_uri() . '/js/pluginLoaded.js', array( 'jquery' ), '1.0.0', true );

    // Define our parameters
    $params = array(
        'styleUrl' => get_template_directory_uri() . '/css/vendor/magnific-popup.css',
        'scriptUrl' => get_template_directory_uri() . '/js/vendor/jquery.magnific-popup.min.js',
    );

    // Create the JavaScript object
    wp_localize_script( 'pluginLoaded', 'pluginLoadedParams', $params );
}

add_action( 'wp_enqueue_scripts', 'pluginLoaded_scripts' );

The Full Code

Please leave some feedback in the comments.

comments powered by Disqus
Want a beautiful and engaging website for your business? Check out YOSA Digital×