Best Way to Include Scripts on a Specific Template Page

Question

This is something that has always confused me and I could use some help.

I want to do four things directly above the closing body tag:

1. include jQuery (WordPress version is fine)
2. include a jQuery plugin dependent on jQuery beneath this
3. initialize the plugin directly underneath this plugin AND avoid conflict issues using $ instead of jQuery
4. do this only on specific page templates or theme files

I understand that I probably should be using wp_enqueue_script, but I'm not sure if I should use that in functions.php or just directly on the page where I want it.

Regarding number 3 I have seen the workarounds such as:

jQuery(function ($) {
/* You can safely use $ in this code block to reference jQuery */
});

But I'm honestly confused as to how to implement this.

What's the best way to accomplish this?

Thanks very much.

Answer 1

The following (in your theme's functions.php) will register your script, and set jQuery as a dependency. So when you enqueue it, jQuery will also be enqueued.

function my_scripts_method() {
   // register your script location, dependencies and version
   wp_register_script('my_custom_script',
       get_template_directory_uri() . '/js/custom_script.js',
       array('jquery'),
       '1.0' );

}
add_action('wp_enqueue_scripts', 'my_scripts_method');

You can then enqueue your script one of two ways. In your theme's functions.php you can use the template_include filter the get the template being used using is_page_template()

add_filter( 'template_include', 'my_load_script_for_template', 1000 );
function my_load_script_for_template( $template ){
     if(is_page_template('my-template.php'))
        wp_enqueue_script('my_custom_script');

return $template;
}

Alternatively, if you are using 3.3+ and your theme calls wp_footer() then you can just call wp_enqueue_script('my_custom_script') inside the actual template page.

Answer 2

I'm not sure it's still (or ever was) the "best way" since I haven't had time to browse the latest development updates, but I'll start by posting how I do it:

function my_slider_script() {
  if ( !is_page_template( 'slider.php' ) )
  return;
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-tabs');
    wp_enqueue_script( 'my_rotator_script', get_template_directory_uri() . '/js/photo_rotator_tabs.js', array('jquery'));
  }
add_action( 'template_redirect', 'my_slider_script' )

The first two are using the WordPress included js, and the 'my_rotator_script' is one I've included in my template folder inside a js folder in the theme root called photo_rotator_tabs.js. It is only included on the pages that use the slider.php page template.

I think Scribu has written a very detailed post on this subject, but I don't recall the link. I think he uses the wp_print_scripts method, or the "WordPress Ninja" method. Maybe he'll help you out if my was is obsolete.