11

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

9 Answers 9

9

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.

3
  • Great, this will be very useful. All these plugins add so many scripts... By the way, is it better to ask on stackoverflow than wordpress.stackexchange?
    – huyz
    Jul 5, 2011 at 14:33
  • You could just use strstr() or strpos() instead of regex to find your shortcode... The man page for preg_match says Do not use preg_match() if you only want to check if one string is contained in another string. Use strpos() or strstr() instead as they will be faster.
    – CommandZ
    Feb 21, 2014 at 18:16
  • But if there were args for the shortcode then it wouldn't work. Didn't think that through...
    – CommandZ
    Feb 21, 2014 at 20:18
5

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
}
4
  • 1
    This will not include the stylesheet since the shortcode is called too late in the page load to do so. It will add the scripts to the footer however. In the example that Scribu gave, he specifically only showed the scripts.
    – CommandZ
    Feb 21, 2014 at 3:43
  • You are right... i was wandering why my css file is in the footer... thx for comment.
    – Catalin
    Feb 21, 2014 at 17:42
  • I did workup a way to do this though. I get the pages that the shortcode is on using the save_posts hook and save those pages as an array to options and then all I have to do is get_option and check if the page_id is in_array to print the styles and scripts or not. That way you don't have to parse all the posts each time only when saving a post that is not a revision.
    – CommandZ
    Feb 21, 2014 at 18:15
  • i like your answer from above but i have a "glitch".. i made a meta box for pages where i put a shortcode that require a js and css file, and make an output in a header so.. your answer dont work because it searches only the content, but what if i use in a sidebar the shortcode?... there are ways to make your code work in those situations?
    – Catalin
    Mar 31, 2014 at 9:27
4

Loading Scripts and Styles Dynamically Per Page Using a Shortcode

Advantages

  • Does not search through all the posts everytime the shortcode is called.
  • Able to add styles as well as scripts dynamically only when shortcode is on the page.
  • Does not use regexes since they tend to be slower than strstr() or strpos(). If you need to pickup args then you should use the shortcode regex mentioned above.
  • Reduces file calls

Explanation of Code

  1. Finds the shortcodes on page using the save_post hook only when the post is not a revision and matches the specified post_type.

  2. Saves the found post ids as an array using add_option() with autoload set to yes unless the entry is already present. Then it will use update_option().

  3. Uses hook wp_enqueue_scripts to call our add_scripts_and_styles() function.

  4. That function then calls get_option() to retrieve our array of page ids. If the current $page_id is in the $option_id_array then it adds the scripts and styles.

Please note: I converted the code from OOP Namespaced classes so I may have missed something. Let me know in the comments if I did.

Code Example: Finding Shortcode Occurences

function find_shortcode_occurences($shortcode, $post_type = 'page')
{
    $found_ids = array();
    $args         = array(
        'post_type'   => $post_type,
        'post_status' => 'publish',
        'posts_per_page' => -1,
    );
    $query_result = new WP_Query($args);
    foreach ($query_result->posts as $post) {
        if (false !== strpos($post->post_content, $shortcode)) {
            $found_ids[] = $post->ID;
        }
    }
    return $found_ids;
}

function save_option_shortcode_post_id_array( $post_id ) 
{
    if ( wp_is_post_revision( $post_id ) OR 'page' != get_post_type( $post_id )) {
        return;
    }
    $option_name = 'yourprefix-yourshortcode';
    $id_array = find_shortcode_occurences($option_name);
    $autoload = 'yes';
    if (false == add_option($option_name, $id_array, '', $autoload)) update_option($option_name, $id_array);
}

add_action('save_post', 'save_option_shortcode_id_array' );

Code Example: Shortcode Dynamically Include Scripts and Styles

function yourshortcode_add_scripts_and_styles() {
    $page_id = get_the_ID();
    $option_id_array = get_option('yourprefix-yourshortcode');
    if (in_array($page_id, $option_id_array)) {
        wp_enqueue_script( $handle, $src, $deps, $ver, $footer = true );
        wp_enqueue_style( $handle, $src , $deps);
    }
}

add_action('wp_enqueue_scripts', 'yourshortcode_add_scripts_and_styles');
2
  • definitely better than searching through each post ;)
    – Daithí
    Feb 26, 2014 at 15:06
  • @Coombesy Thanks! I've been using this in my own plugins (only in class/namespace environment) and it has been working well. I wish they would put something like this in core. There is no reason they couldn't maintain a list of pages that the shortcode is on and then only include the scripts and styles if on those pages. Instead we get a bloated mass of scripts and styles if you use a lot of plugins. Crazy.
    – CommandZ
    Feb 26, 2014 at 15:29
2

Just read this tutorial over here: http://scribu.net/wordpress/optimal-script-loading.html

Seems to be the best way.

add_action('init', 'register_my_script');
add_action('wp_footer', 'print_my_script');

function register_my_script() {
    wp_register_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true);
}

function print_my_script() {
    global $add_my_script;

    if ( ! $add_my_script )
        return;

    wp_print_scripts('my-script');
}

In this case, the script will be enqueued only if the $add_my_script global was set at some point during the rendering of the page.

add_shortcode('myshortcode', 'my_shortcode_handler');

function my_shortcode_handler($atts) {
    global $add_my_script;

    $add_my_script = true;

    // actual shortcode handling here
}

So, the script will be added if [myshortcode ...] was found in any of the posts on the current page.

1

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.

1

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.
}

?>
1

I use WordPress Version 5.4 with OOP style of code i dont know if this affect why none of the above solutions didn't work for me so i come up with this solution:

public function enqueue_scripts() {
 global $post;
 //error_log( print_r( $post, true ) );
 //error_log( print_r(  $post->post_content, true ) );
 //error_log( print_r(  strpos($post->post_content, '[YOUR_SHORTCODE]'),true));

 if ( is_a( $post, 'WP_Post' ) && strpos($post->post_content, '[YOUR_SHORTCODE]') ) 
 {
     wp_register_style('my-css', $_css_url);
     wp_register_script('my-js', $_js_url);
 }
}

Hope this help someone.

0

How many pages are these scripts going to be loaded on? Would it be feasible to maintain an array of pages, and only load the scripts/stylesheets when the current page is in the array?

Otherwise, without scanning the code there is no way to do this, as WP doesn't even know the shortcode exists until well into the page load.

1
0

BraedenP is right, I'm pretty sure there is no way to detect shortcode usage at the execution time of wp_enqueue_scripts / when the stylesheets load.

Is there any reason you must do this in 8 files? One would just be more efficient, then it may not be a problem to load it on every page.

You could consider a PHP stylesheet solution that only executes certain styles if needed. A css.php file may resemble:

<?php
header("content-type: text/css");
/* You can require the blog header to refer to WP variables and make queries */
//require '../../../wp-blog-header.php';
$css = '';
$css .= file_get_contents('style.css');
/* Consider using GET variables or querying a variable in the WP database to determine which stylesheets should be loaded. You could add an option to the backend that allows a stylesheet to be turned on or off. */
if($condition1 == TRUE) $css .= file_get_contents('condition1.css');
if($condition2 == TRUE) $css .= file_get_contents('condition2.css');
?>

Less scripts and less stylesheets means less http requests and a faster load time.

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.