Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
add comment

2 Answers

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.

share|improve this answer
    
That post was for short-codes. :D –  Stephen Harris Mar 17 '12 at 22:11
add comment

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.

share|improve this answer
    
Thanks for the answer. Do you have any advice on the issue of the jQuery variable $ and the correct use of shortcuts to get around this issue? I'm not quite sure how to handle this. Is it just the script that fires the plugin on the page that needs this workaround, or do you also have to change the actual jQuery plugin file that is enqueued as well? –  jw60660 Mar 17 '12 at 23:54
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.