wordpress: loading javascript only where shortcode appears

Question

have an interesting conundrum. I need to load about 8 javascript files and the same number of styles for my plugin. These are only needed where ever my shortcode is ran.

I've tried to load them with print_styles and print_scripts but they aren't rendering properly, plus to do so breaks xhtml validation. So at the moment they load on every page and due to the number of files needed its not feasible to leave it like this.

On another project I wrote a function into my plugin's index.php file that would take the current page, search it for my shortcode and if found only then would it print the scripts, but this is an ugly hack.

Has anybody got any suggestions or solutions? any help would be appreciated, regards, Daithi

Answer 1

I read a solution in here: http://scribu.net/wordpress/conditional-script-loading-revisited.html Basically if using wordpress 3.3 you can enqueue your scripts in your short code function.

function my_shortcode($atts){
    wp_enqueue_script( 'my-script', plugins_url( 'plugin_name/js/script.js' ), array('jquery'), NULL, true);

    // if you add a css it will be added to the footer
//wp_enqueue_style( 'my-css', plugins_url( 'plugin_name/css/style.css' ) );

    //the rest of shortcode functionality
}

Answer 2

Load Scripts and Styles if Post/Page has Short Code

The best solution is to load the files into the page header if, and only if, the current post or page has the short code inside its content. And that’s exactly what the following function does:

function flip_register_frontend_assets() 
{

//register your scripts and styles here

wp_register_style('pp_font','plugin_styles.css', null, null, 'all');

global $post;  

//check whether your content has shortcode

if(isset($post->post_content) && has_shortcode( $post->post_content, 'your-
shortcode')){  

//Enqueue your scripts and styles here

 wp_enqueue_style( 'pp_font');

 }
 }

Simply place this function inside of one of your plugin files and you’re good to go. You will need to replace [your-shortcode] with the short code you want to search for, and you will also need to replace plugin_styles.css with your stylesheet name.

Answer 3

You can just use this code to check if the shortcode is implemented in page content or in sidebar widgets.

<?php

if ( shortcode_exists( 'gallery' ) ) {
    // The [gallery] short code exists.
}

?>

Answer 4

to answer my own question... I had it write the first time. You have to search each page to check that your shortcode is being used. This has to be done when page data is loaded and before page is displayed. To me it is complete overkill on the system, but unfortunately it is the way it is. I got this information from: get_shortcode_regex and old nabble

So first:

add_action('template_redirect','wp_my_shortcode_head');

then:

function wp_my_shortcode_head(){
  global $posts;
  $pattern = get_shortcode_regex(); 
  preg_match('/'.$pattern.'/s', $posts[0]->post_content, $matches); 
  if (is_array($matches) && $matches[2] == 'YOURSHORTCODE') { 
        //shortcode is being used 
  }
}

replace 'YOURSHORTCODE' with the name of your shortcode and add your wp_enqueue_scripts into where it says //shortcode is being used.