WordPress: Add Scripts to the Pages You Want

WordPress makes it very easy to load Scripts into your blog. The beauty of the method that WordPress provides is that it allows plugins and themes to use the same script at the same time by ensuring the script is loaded only once.  

The problem we often run into is that not everyone plays by the rules, and so you get plugin conflicts and fatal errors!

In this tip, I’ll show you how easy it is load scripts the right way with wp_enqueue_script and also, how to load them on only the pages you want.

Load Scripts the Right Way with wp_enqueue_script()

I have a couple of plugins out there that use jQuery and Thickbox, and probably 30% of my support questions are related to themes and/or plugins that load jQuery by hardcoding the link into the header!  This is a major sin by developers, because it assumes that your theme or your plugin is the only one in the whole wide world that your users will be using that rely on jQuery.  

When the jQuery (or really any other script) is hardcoded by a theme or plugin and it is loaded by another plugin (right way or wrong way), jQuery stops working!

WordPress, thankfully makes it amazingly simple to load jQuery and a ton of other scripts.  Here’s how:

<?php
//To load a script that isn't already registered with WordPress (it has a ton of pre-registered scripts like jQuery, Thickbox, etc)
wp_enqueue_script( $handle, $source, $deps, $ver, $in_footer );

//Here's one loading a script that's in my template folder
wp_enqueue_script('stlouie',get_bloginfo('template_url') . '/js/stl.js');

//Here's one loading a pre-registered script
wp_enqueue_script('jquery');
?>

Check out the WP Codex page for a full description of how to use wp_enqueue_script and a list of the pre-registered javascripts that you can easily use.

Note: I was trying to use wp_enqueue_script with TinyMCE outside of the Admin, and it didn’t work.  So, some scripts might be Admin Only…not sure 😉

Where to Use wp_enqueue_script()

If you want to use wp_enqueue_script() in your posts and pages, and you want to limit it to certain pages or posts, you can put the following in your theme’s functions.php file:

<?php
add_action('wp_print_scripts', 'enqueueMyScripts');

function enqueueMyScripts(){
  // To load a script only on a Page with ID = 23, follow this format:
    if( is_page('23') ) {
         wp_enqueue_script( 'myscript', get_bloginfo('template_url') . '/js/myscript.js');
   }

  //To load for any page/post that's not Admin
   if( !is_admin() ){
        wp_enqueue_script( 'myscript', get_bloginfo('template_url') . '/js/myscript.js');
   }

  //You can use pretty much any of the WP conditional tags to determine whether to enqueue or not
}
?>

Here’s the link to the WP Conditional Tags.

Notice that you need to tap into the wp_print_scripts action instead of the ‘init’ action since is_page() is not available yet in the init action.

I’ve recorded this because it took me a good bit of time to figure out to use wp_print_scripts instead of init…Placing the add_action() inside header.php didn’t work either. Vladimir Prelovac’s helpful post put me on the right track…He also has a great book,WordPress Plugin Development (Beginner’s Guide)*! This book was very helpful to me with several techniques, particularly around adding images to the WordPress media library.

Cheers,
Byron

* Note: the link to Vladimir’s book is my affiliate link, and I’ll receive a small commission should you click and buy.

, ,

3 Responses to WordPress: Add Scripts to the Pages You Want

  1. Ed March 26, 2010 at 3:03 pm #

    This was very helpful. I struggled with a conditional is_page block to enqueue scripts and had to resort to loading them for all pages or use an ugly hack. The wp_print _scripts is a great tip and will hopefully make my efforts much less frustrating.

  2. Jason Coffee June 8, 2010 at 12:12 pm #

    I am pretty new to all this. How does this apply to what I need to do on my end in fixing the #1 problem in your forum? Thanks for you help.

Trackbacks/Pingbacks

  1. Giving credit where credit is due | 812studio - May 6, 2010

    […] WordPress: Add Scripts to the Pages You Want – Byron Bennett, thanks for this tip. […]

Powered by WordPress. Designed by Woo Themes