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!

closed as too broad by Max Yudin, cjbj, fuxia Mar 19 '17 at 0:39

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 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
2

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.

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');

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