How to link external JavaScript files?

Question

I am working on a custom WordPress theme. I have everything working perfectly so far except for one thing: the external JavaScript files will not work.

I followed the exact advice from the links here and here, but it still does not work.

I have searched the codex, checked source code, used firebug. I have no idea why this is not working. Unfortunately, due to an NDA, I am not allowed to give you any of the actual code from the site, or a link to it. So I will have to explain as best as I can.

I have used the wp_enqueue_script() to include the files in the functions.php file. The script tags in the head are as follows:

<script type='text/javascript' src='http://www.xx.com/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
<script type='text/javascript' src='http://www.xx.com/wp-content/themes/twentyten/scripts/custom.js?ver=3.1'></script>

So the files are loading, but they just are not working. I was wondering if the ?ver=3.1 at the end of my custom.js file might have anything to do with it?

The code from my functions.php file:

function twentyten_custom_scripts() {
if ( !is_admin() ) // instruction to only load if it is not the admin area
{ 
   // register your script location, dependencies and version
    wp_register_script('custom_script', get_bloginfo('template_directory') . '/scripts/custom.js', array('jquery') );
   // enqueue the script
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script('custom_script');
}
}
add_action('template_redirect', 'twentyten_custom_scripts');

I am really lost at this point. I even changed all my:

$('#elem').hide(); 

to

jQuery('#elem').hide(); 

In the custom.js file according to the codex wp_enqueue_script() no conflicts wrappers section here, still nothing.

Oh, and I am needing this file to load into all of my Pages, but not on my Blog, as I have multiple static pages set up for the main site. I hope that makes sense.

Answer 1

From my point of view, this should be working. Maybe you can post your custom.js file here. It could be possible that this file has a syntax error or something similar. You could also test if the built-in jquery is working out of the box by adding a simple jquery-command in your header.php.

Some hints:

1. The action-hook template_redirect is used to include the file only on the front-page (so i can remeber). If you want to load the script after the theme is loaded, you can use the after_setup_theme action-hook.

2. You don't have to enqueue your jquery file manually, if you set jquery as a dependancy of your custom.js, like you did. The file will automatically be loaded from WordPress before your custom.js is attached.

3. Do you have added the jQuery.noConflict(); at the beginning of your custom.js?

Some working example:

functions.php

function twentyten_custom_scripts() {
    if ( !is_admin() ) // instruction to only load if it is not the admin area
    { 
        wp_register_script('custom_script', get_bloginfo('template_directory') . '/scripts/custom.js', array('jquery') );
        wp_enqueue_script('custom_script');
    }
}
add_action('after_setup_theme', 'twentyten_custom_scripts');

custom.js

jQuery.noConflict();

jQuery(document).ready(function() {
    // do your stuff e.g.
    jQuery("a[rel^='prettyPhoto']").prettyPhoto();
});