0

I'm really new to wordpress and now I have to do a plugin that creates a HTML table from file and prints it to the page, and add more functionality to the table using DataTables jquery addon. This all has to happen when i call shortcode in the page. I have managed to get the html table to the page, but i have no idea how to run jquery script to modify it. So, in short: how to run jquery script after shortcode. Any input is appreciated!

  • You question is not very clear. A shortcode is evaluated on the server side. The page is then sent to the user, including any scripts. So the script will always be applied after the shortcode. – cjbj Mar 17 '17 at 16:42
1

Your question is a little unclear. I'm interpreting it to mean that you want to enqueue a jQuery script to be run by the user's browser only on public pages that contain the shortcode.

There are (at least) three ways of running a jQuery script only on pages that have a specific shortcode. The first way is to use the add_shortcode() function to add a hook to get_footer which then enqueues the jQuery script in the footer.

//* Enqueue script in the footer
function wpse_260465_enqueue_script() {
  wp_enqueue_script( 'your-style-id', PATH_TO . 'script.js', [ 'jquery' ], false, true );
}

//* Add action to enqueue script in the footer and return shortcode value
function wpse_260465_shortcode( $atts ) {
  add_action( 'get_footer', 'wpse_260465_enqueue_script' );
  return 'your shortcode content';
}

add_shortcode( 'wpse_260465', 'wpse_260465_shortcode' );

The second way registers the script on every page, but only enqueues it when the specific shortcode is called on a page.

//* Enqueue previously registered script and return shortcode value
function wpse_260465_shortcode( $atts ) {
  wp_enqueue_script( 'your-style-id' );
  return 'your shortcode content';
}
add_shortcode( 'wpse_260465', 'wpse_260465_shortcode' );

//* Register our script to maybe enqueue later
add_action( 'wp_enqueue_scripts', 'wpse_260465_enqueue_scripts' );
function wpse_260465_enqueue_scripts() {
  wp_register_script( 'your-style-id', PATH_TO . 'script.js', [ 'jquery' ], false, true );
}

The third way is to simply use the add_shortcode() function to write the jQuery inline.

//* Return inline jQuery script with shortcode value
function wpse_260465_shortcode( $atts ) {
  $your_shortcode_content = 'your shortcode content';
  $your_shortcode_content .= $your_inline_jquery;
  return $your_shortcode_content;
}
add_shortcode( 'wpse_260465', 'wpse_260465_shortcode' );

The first and second methods are more the "WordPress way", and the third is the easiest to understand, but all three should work.

|improve this answer|||||
0
function your_css_and_js() {
    wp_register_style('your_css_and_js', plugins_url('style.css',__FILE__ ));
    wp_enqueue_style('your_css_and_js');
    wp_register_script( 'your_css_and_js', plugins_url('your_script.js',__FILE__ ));
    wp_enqueue_script('your_css_and_js');
}

//adds to the admin dasboard if needed
add_action( 'admin_init','your_css_and_js');

//adds to frontend
add_action('wp_enqueue_scripts', 'your_css_and_js');
|improve this answer|||||

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