How to Enqueue Script and Style Only If Page Using Shortcode

Do you want to enqueue script and stylesheet only if the page uses a particular shortcode?. Here are the 3 methods with different scenarios to do that easily. Let’s understand them one by one.

For all these 3 methods, Let’s assume 3 different cases. One for each method to get the idea of enqueuing only if page using shortcode.

Method-1: Enqueue Scripts & Styles Only If Page | Post | Template & Widget Using That Shortcode

Case 1: In this case, let’s assume you are creating a shortcode and you want to enqueue scripts and styles only if that shortcode getting used somewhere on that page either in page/post editor, or in widgets, or in the template using PHP.

To do that, all you need is just enqueue your scripts and styles within shortcode function. 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.

Method-2: Enqueue Scripts & Styles Only If Page or Post Content Using Shortcode

Case 2: In this case, let’s assume you want to enqueue scripts and stylesheet only if the shortcode getting used either in the post content or page content. It means, the shortcode should be used within the body text of a page or post.

To do that, all you need is to create a separate function to enqueue your scripts and styles and then use the has_shortcode() function to check if the post or page 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.

Method-3: Enqueue Script & Style of an Existing Shortcode or Plugin Only When that Shortcode Getting used in the page or post

Case 3: In this case, let’s assume you want to enqueue scripts & styles of an existing shortcode or plugin only if that shortcode is getting used in the page or post.

To do that, first, you have to dequeue those scripts and styles and then re-enqueue them only if that particular shortcode getting used on the page.

Note: To re-enqueue scripts & styles, you can use the above methods. Here I will show you how to first dequeue them and then enqueue.

Step 1: Dequeue Script or Style

First, you have to dequeue script and style that you want to enqueue only if page or post using its 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.

So here 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.

Dequeue Font-Awesome Style

function dequeue_font_awesome(){
	wp_dequeue_style('font-awesome-5');
}

add_action('wp_enqueue_scripts', 'dequeue_font_awesome');

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 existing shortcode or plugin only if that shortcode getting used on the page or post.

To know more about the enqueue of scripts and styles, you can check the resources given below.

I hope this article helps you to understand the enqueuing of scripts and styles with shortcodes.

Share it to the Community!

You May Also Like These enqueue Posts:

Leave a Reply

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