0

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.

1
  • There's no reliable method for directly tying scripts and styles to the use of a shortcode. The shortcode callback is not run until the shortcode is found in content, at which point it is too late to load stylesheets or scripts in the header. You will need to enqueue your styles outside of the shortcode class on every page load. Have you considered just creating a block? Shortcodes are all but obsolete, and blocks make this much easier. Sep 9, 2023 at 12:09

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.