How to include code only on specific pages?

Question

I'm learning about plugins and shortcodes. I noticed that when I activate my plugin its code gets loaded on all of my pages-- even pages that don't have my shortcode. (I don't mean content vs. admin pages). On some content pages, I use a particular shortcode and on other content pages, I don't-- but in any case, the plugin's code is loaded. How do I make it so that the the plugin is included only on pages where the shortcode is used?

More Detail:

Let's say I've got a plugin that makes a lightbox. I activate the plugin. On my "Cool Images" page, I use shortcode to make a lightbox. When I check View Source on my "About" page, which doesn't use the lightbox shortcode, I see that the lightbox plugin's code has been loaded. My pages will load faster if I write my plugin so that its code is only loaded on the pages where it's needed. Is this possible? Otherwise, I'll have code for lots of plugins loaded on pages unnecessarily. Any ideas?

Answer 1

WP v3.3 gave us the ability to run wp_enqueue_script in the middle of a page. Ticket 9346

This has made it much easier to include your JS with better granularity (when using shortcodes, at least). Here, jquery will be only included when our shortcode is fired.

function get_slideshow() {
  // Do some stuff...

  // Load up scripts right from within our shortcode function (requires WP 3.3+)
  wp_enqueue_script( 'jquery', array(), null, true  ); 

  return;
}
add_shortcode( 'cool_slideshow', 'get_slideshow' );

Answer 2

Check for admin UI variables

One menu item is a special case: Comments, as they get registered using the add_WHATEVER_(submenu)page() API.

// All need to be stated as beeing global
global $pagenow, $typenow, $hook_suffix, $parent_file, $submenu_file, $post_type_object;
if ( 'THE-OUTPUT.php' === $WHATEVER_YOU_CHOOSE_TO_CHECK )
    // do stuff

^{These are non-consitent and hardcoded into wp core. Note that not all are set on all pages.}

Hook into page-specific admin UI hooks

Then there're also special, page-specific hooks, that you can take a look at in admin-footer.php and admin-header.php:

// Examples:
// Header
"admin_head-$hook_suffix"
"admin_print_styles-$hook_suffix"
"admin_print_scripts-$hook_suffix"
// Footer
"admin_footer-$hook_suffix"

Some examples in the real world: Post Screen

// Examples how the result looks like
admin_print_styles-post.php
admin_print_styles-post-new.php

Then there's also the $hook_suffix that you can check against for enqueueing scripts, right when you're hooking your action:

do_action( 'admin_enqueue_scripts', $hook_suffix );

Update

To get easier (1-click) access to this data/info, we built a freely available, developer friendly plugin named "(WCM) Current Admin Info", which is available on GitHub. The plugin can in the near future also be found in the official wp.org repository.

Screen shots

To give a preview of what you get with this plugin:

Answer 3

@kaiser noted get_shortcode_regex() several times in this thread, I just thought I give an example on how to use it. The code is pretty much taken from the get_shortcode_regex() WordPress Code Reference page.

function enqueue_script_if_shortcode_is_detected() {
    global $post;

    wp_register_script( 'your-script', $the_path_to_your_script, '1.0', true );

    $pattern = get_shortcode_regex();

    if (   preg_match_all( '/'. $pattern .'/s', $post->post_content, $matches )
        && array_key_exists( 2, $matches )
        && in_array( 'your-shortcode', $matches[2] )
    ) {
        wp_enqueue_script('your-script');
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_script_if_shortcode_is_detected' );

Answer 4

Could do something along the lines of (in the header.php):

<?php
        if ( have_posts() && ( is_page() || is_single() ) ) {
            $content = get_the_content(the_post());
            if ( stripos( $content , '[your-shortcode') ) { function_for_scripts(); } 
        }   
?>

Checks if current load is page or post, then grabs content and searches for your shortcode. Upon finding it, it executes your function.

Answer 5

The simplest way is to just check for the shortcode.

function your_scripts()
{ 
    global $post;
    wp_register_script('your-script',$the_path_to_your_script,'0.1',true);
    if ( strstr( $post->post_content, '[your-shortcode' ) ) 
    {
        wp_enqueue_script('your-script');
    }
}
add_action( 'wp_enqueue_scripts', 'your_scripts');

Answer 6

I found this solution:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
    wp_deregister_script( 'my_scripts_handle' );
}