Best Way to Include Scripts on a Specific Template Page

1 Views

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:

Read More
  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.

Post Views: 1

Related posts

Leave a Reply

2 comments

  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.

  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.