If you are making a WordPress plugin which uses a shortcode, and said shortcode needs some Javascript enqueued in order to function, it may be tempting to just whack the script in the wp_enqueue_scripts hook and be done with it.
add_action( 'wp_enqueue_scripts', 'enqueue_my_script' );
function enqueue_my_script() {
wp_enqueue_script( 'script-name', plugins_url( '/js/script.js' , __FILE__ ), array(), '1.0.0', false );
}Yes this works fine, and is perfectly fine during development, but as the script gets loaded site wide this can be terribly inefficient if the script is specific to your plugin.
To improve matters, you can employ some conditional tags to control where your script gets loaded. For example:
add_action( 'wp_enqueue_scripts', 'enqueue_my_script' );
function enqueue_my_script() {
if ( is_archive() || is_single() ) {
wp_enqueue_script( 'script-name', plugins_url( '/js/script.js' , __FILE__ ), array(), '1.0.0', false );
}
}The above code would enqueue on single posts and within post archives.
For a shortcode however, this can be tricky; you know the shortcode can only be used within posts and pages, but a) thats pretty much site wide anyway and b) you don’t know if the shortcode is being used on the page you are enqueuing the script.
One way you can further optimise your enqueue would be to check the content of a post and see if it contains your code – but again, the drawback is that will most likely only work in certain situations, for example if your shortcode is intended to be used when viewing single posts only.
The sensible method
Forget conditional tags. Forget enqueuing site wide. Instead the solution is quite simple…
First, register your script early, don’t enqueue it.
add_action( 'wp_enqueue_scripts', 'register_my_script' );
function register_my_script() {
wp_register_script( 'script-name', plugins_url( '/js/script.js' , __FILE__ ), array(), '1.0.0', true );
}At this point, WordPress is aware your script exists, but it won’t be loaded onto pages. Notice the ‘true’ in your wp_register_script call – this is important and tells WP that you want the script to be loaded in the footer of your page.
Next, and this is the best part, you can enqueue on demand. Now in your plugin where you render your shortcode simply add:
wp_enqueue_script( 'script-name' );This will enqueue your previously registered script ready for output in the footer of the page.
Now you have a lazy-loaded script, and no need for fancy conditional rules – much better.
Leave a Reply