The following guide will show you how to properly load scripts on your site only if a specific shortcode exists to keep your site well optimized. The methods explained in this article technically apply to anything not just shortcodes, essentially we’ll teach you how to register your scripts and then load them only when needed.
Before sharing the code for conditionally loading your script if a shortcode exists, we’ll go through and explain how to properly register your script. If you are already know how to do this you can simply skip to the code.
How to Register Your Script?
In WordPress whenever you intend on loading a script on the front-end you should be registering the script via the wp_enqueue_script function hooked into wp_enqueue_scripts. The reason we register scripts via core WordPress functions rather then simply dumping them in the header.php file is in order to provide full support for caching and optimization plugins as well as to allow for child theme and custom plugin modifications.
To register a script in WordPress you will be using the wp_register_script core function. Below is a simple example:
/**
* Register scripts.
*
* @link https://www.wpexplorer.com/load-scripts-shortcode/
*/
function my_register_scripts() {
wp_register_script(
'footag-shortcode',
get_stylesheet_directory_uri() . '/assets/js/example.js',
[],
'1.0.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'my_register_scripts' );As you can see in this example the wp_register_script accepts 5 parameters:
- Script handle: The first parameter is the script handle which is the unique name for your script and you will use later to load it on the site.
- File URL: The second parameter should be the full URL (not path) to where the script file is located.
- Dependencies: The third parameter should be an array of other script handles that this script requires.
- Version: The fourth parameter is the version number for your script (which is important to keep updated to prevent caching issues).
- Load in footer: The fifth and last parameter tells WordPress to load the script in the footer or header. In our case this doesn’t really matter since we are loading script only if a shortcode exists it will always load in the footer.
How to Load Your Script Inside a Shortcode?
If you are registering your own shortcode then loading your script if the shortcode exists is extremely simple. All you need to do is run the wp_enqueue_script function inside your add_shortcode function. See the example below:
/**
* Register the "footag" shortcode.
*
* @link https://www.wpexplorer.com/load-scripts-shortcode/
*/
function my_register_footag_shortcode( $atts = [], $content = '' ) {
// Parse shortcode attributes.
$atts = shortcode_atts( [
'foo' => 'no foo',
], $atts, 'footag' );
// Enqueue our script.
wp_enqueue_script( 'footag-shortcode' );
// Output shortcode.
return '<div class="footag-shortcode">' . $atts['foo'] . '</div>';
}
add_shortcode( 'footag', 'my_register_footag_shortcode' );What we’ve done is used the wp_eneuque_script to load our “footag-shortcode” script as registered previously.
How to Conditionally Load a Shortcode Dependent Script Outside of add_shortcode?
Now this is where things get more complicated and perhaps what you are actually looking for. Let’s say you are using a shortcode on your site that is registered by a 3rd party plugin so you can’t use wp_enqueue_script inside the add_shortcode function but you still want your custom script to only be loaded on the site if the shortcode exists.
The code below will show you how you can check for the existence of a shortcode within the post content for any posts loaded on the site and enqueue your script accordingly.
Important: Depending on the shortcode you are using there may be hooks available you can use instead, which would be more efficient. So before using the code below I would recommend you reach out to the developer of the plugin that registers the shortcode and ask them if such hooks exist.
/**
* Conditionally load scripts if a shortcode exists.
*
* @link https://www.wpexplorer.com/load-scripts-shortcode/
*/
function my_check_for_shortcode( $posts ) {
if ( empty( $posts ) ) {
return $posts;
}
foreach ( $posts as $post ) {
if ( false !== stripos( $post->post_content, '[footag' ) ) {
wp_enqueue_script( 'footag-shortcode' );
break;
}
}
return $posts;
}
add_action( 'the_posts', 'my_check_for_shortcode' );How does this code work?
Basically we hook into the WordPress “the_posts” hook which “Filters the array of retrieved posts after they’ve been fetched and internally processed” and we check the post content for each post to see if the shortcode exists within the content and if so we enqueue our script then break out of the foreach loop.
