Oftentimes, you only want to enqueue your scripts and styles files in the WordPress template or theme, if that shortcode is getting used by the active page.
In this article, I am going to share 3 common cases, where you might want to enqueue your scripts & styles if the shortcode is getting used.
- Enqueue Scripts & Styles Only If Shortcode Getting Used in the Page
- Enqueue Scripts & Styles Only If Shortcode Getting Used in the Page or Post Content
- Enqueue Scripts & Styles of a Plugin Only If Shortcode Getting Used
I have written a separate article on enqueuing scripts & styles only when shortcode exists, where I have outlined adding scripts & styles if the shortcode exists in the WordPress system.
Enqueue Scripts & Styles Only If Shortcode Getting Used in the Page
In this case, let’s assume you only want to enqueue scripts or styles if a particular shortcode is getting used somewhere on the page.
To do that, just enqueue your scripts and styles within the shortcode function.
By doing so, your scripts will only include if that shortcode function is getting executed. You can see the below code as an example.
function enqueue_script_style_page_using_shortcode(){
// Add your scripts and styles here..!
wp_enqueue_style('my-custom-css', get_template_directory_uri().'/css/my-custom.css');
wp_enqueue_script('my-custom-js', get_template_directory_uri().'/js/my-custom.js');
// Your Shortcode code goes here….
$output = "Hey I Am Using Shortcode";
return $output;
}
add_shortcode( 'myshortcode', 'enqueue_script_style_page_using_shortcode');
This method will enqueue scripts and styles only if that particular page is getting used that [myshortcode] anywhere on that page.
Enqueue Scripts & Styles Only If Shortcode Getting Used in the Page or Post Content
In this case, let’s say you only want to enqueue scripts and styles files if the shortcode is getting used in the post or page content.
That means, the shortcode getting used within the WordPress editor or body text of a page/post.
To do that, create a function to enqueue your scripts and styles and then use the has_shortcode() function to check if that page/post content has a shortcode in it.
Remember: Don’t forget to change the shortcode name in the has_shortcode() function. Replace ‘my-shortcode-name‘ with your shortcode name that you want to check.
function enqueue_scripts_style_page_content_using_shortcode(){
global $post;
if(has_shortcode( $post->post_content, 'my-shortcode-name') && ( is_single() || is_page() ) ){
wp_enqueue_style('my-custom-css', get_template_directory_uri().'/css/custom.css');
wp_enqueue_script('my-custom-js', get_template_directory_uri().'/js/my-custom.js');
}
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts_only_if_page_using_shortcode' );
This method will check for the shortcode [my-shortcode-name] only in the content of a single post or on the page.
Enqueue Scripts & Styles of a Plugin Only If Shortcode Getting Used
In this case, let’s say you only want to enqueue scripts & styles of a plugin if that plugin’s shortcode is getting used in the page/post.
To do that, first, you have to dequeue your plugins scripts and styles and then re-enqueue them only if the plugin’s shortcode getting used on the page.
Step 1: Dequeue Script or Style
Let’s say I want to dequeue font awesome stylesheet and I only want to use font awesome if the page uses my shortcode.
So first I will dequeue font awesome stylesheet by using wp_dequeue_style( $handle ) function and then re-enqueue again with the shortcode.
Note: Dequeuing of scripts and styles of your existing shortcode or any plugin can break your site’s functionalities and design. So please be careful, check and only dequeue scripts and styles, those don’t have any major or core impact on your site.
Dequeue Font-Awesome Style
function dequeue_font_awesome(){
wp_dequeue_style('font-awesome-5');
}
add_action('wp_enqueue_scripts', 'dequeue_font_awesome');
Step 2: Re-enqueue Font Awesome Style With Shortcode
function re-enqueue_font_awesome_style_shortcode(){
// Enqueue Font Awesome again with the shortcode
wp_enqueue_style( 'font-awesome-5', get_template_directory_uri() . '/css/fontawesome-all.css' );
// Your Shortcode code goes here….
$output = "Hey I Am Using Shortcode";
return $output;
}
add_shortcode( 'myshortcode', 'enqueue_script_style_page_using_shortcode');
By using this method, you can easily enqueue scripts or styles of your plugin only if that shortcode getting used on the page or post.
