correct way to enqueue js and css files for wordpress shortcode?

Question

I have created a php class file. I am enqueuing the required CSS and JS files in the class's constructor.

public function __construct() {
    add_action('wp_enqueue_scripts', array($this, 'formdb_enqueue_scripts'));

}

Plugin uses a shortcode that outputs the required content. My problem is that if I create the instance of class in the shortcode then it doesn't load the CSS and JS files.

This doesn't work.

add_shortcode('render_form', array($this, 'wp_db_fb_co_form_render'));                 
public function wp_db_fb_co_form_render($atts)
{
    $this->classob = new ClassObj();//class object inside the shortcode
    $atts = shortcode_atts(array(
        'id' => 0,
    ), $atts, 'fd-form');
    $form_id = $atts["id"];

    if($form_id) {
        $form_info = $this->get_form_data_by_form_id($form_id);
        $form_data = $form_info["form_data"];            
        echo $this->output_form($form_data, "insertform");
    }


}

If I create instance of class before the shortcode, then it works.

Let me know what is correct way to do this.

Answer 1

A better approach would be to only enqueue the scripts and styles when you know the shortcode is actually being used on the page. One way to do this is to use the wp_enqueue_scripts action to check if the shortcode exists in any of the posts on the current page. If it does, then you can enqueue your scripts and styles.

For example, you could do something like this outside your class, maybe in your main plugin file:

add_action('wp_enqueue_scripts', 'check_for_shortcode');

function check_for_shortcode() {
    global $post;
    if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'render_form') ) {
        wp_enqueue_script( 'my-script', plugin_dir_url( __FILE__ ) . 'js/my-script.js', array('jquery'), '1.0', true );
        wp_enqueue_style( 'my-style', plugin_dir_url( __FILE__ ) . 'css/my-style.css' );
    }
}

This way, your scripts and styles will only get loaded if the shortcode is actually present, keeping your site efficient.