up vote 5 down vote favorite
3
share [g+] share [fb]

So I'm using Starkers to base my next WP theme on and I've run into a small issue, I was including my own version of jQuery in the header.php file but when inspecting my site using Firebug I noticed jquery was being downloaded twice, I did a bit of digging and noticed that not only was I including the file but so was the wp_head() function.

In trying to fix the problem I noticed a comment in the header file, of which originated came from the Twenty Ten theme:

/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head>, such 
 * as styles, scripts, and meta tags
 */

So here's my problem, I am under the impression that the jQuery file has to be set before any other file that wants to use it and that wp_head() should be the last thing in the <head> element, I'm slightly confused now as I'm wondering should I put wp_head() at the top so the WP included jQuery file will be used for all my plugins, even though it says not to do so.

I did comment out the jQuery line in the wp_head() function but it's required for the admin page so I had to put it back.

I'd also like to use (at least experiment) with using the Google CDN version of jQuery, but don't want to include it twice!

I hope you understand what I'm trying to explain, any suggestions on how I can solve this problem would be most appreciated. I'd also appreciate any advice on how you handle your JavaScript files with the header file.

Thanks!

link|improve this question
71% accept rate
This should be retitled to something like "How to Link External jQuery/Javascript files with WordPress." – MikeSchinkel♦ Aug 17 '10 at 20:26
I agree, I was unsure what to call it as I wasn't too familiar with the problem I had :-) – Ben Everard Aug 18 '10 at 9:51
feedback

2 Answers

up vote 6 down vote accepted

From the wording of your question, you must be adding scripts by writing <script> tags in your template. Add your own scripts via wp_enqueue_script() in your template's functions.php, appropriately setting dependences on jQuery, and wp_head() will add the scripts for you.

function my_scripts() {
    wp_enqueue_script( 'my-sweet-script', get_bloginfo('template_directory') . '/script.js', array('jquery') );
}
add_action('template_redirect', 'my_scripts');

See the codex page for more info.

link|improve this answer
You are correct in thinking that I am adding scripts using the <script> tag, this is the alternative I was looking for, many thanks! :-) – Ben Everard Aug 17 '10 at 13:19
3  
If you want to add your script only on the front end, hook onto 'template_redirect' instead of 'init'. – John P Bloch Aug 17 '10 at 14:08
Good stuff, I'll update my answer. I almost suggested wrapping the enqueue in is_admin(). – Adam Backstrom Aug 17 '10 at 14:35
I generally enqueue the scripts in the template file above the get_header(), doing it in functions.php will enqueue it on every page which may not be required. If I do have a global one, I enqueue it in header.php before wp_head() is called. That way the enqueues are where you would expect them to be in the <head> – Joe Hoyle Aug 17 '10 at 18:47
Sometimes it's better to add scripts on the bottom of the page. It's the last parameter of codex.wordpress.org/Function_Reference/wp_enqueue_script (5th, $in_footer), set it to true. Little info for those who need more control. – hakre Aug 18 '10 at 11:55
feedback
up vote 6 down vote

I suggest taking a look at 5 Tips for using jQuery with WordPress. Among other things, it shows the code necessary to load jQuery from Google's library:

function my_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

You could also check out the Use Google Libraries plugin.

link|improve this answer
1  
This is actually a better answer, since it shows how to queue up the Google CDN version of jQuery. Though, like John suggested elsewhere, if you only want to to this on the front-end, hook on to template_redirect instead of init. – EAMann♦ Aug 17 '10 at 14:34
Good point about where it loads. Although really, the admin area makes use of jQuery as well, right? Either way, thanks for showing how to control it. – tnorthcutt Aug 17 '10 at 16:56
Yes I just found the 5 tips for jquery / wp post, thanks for your answer :-) – Ben Everard Aug 17 '10 at 17:34
5 Tips for using jQuery with WordPress -- the link isn't working any longer. – hakre Nov 12 '10 at 22:52
Thanks hakre, I fixed the link. – tnorthcutt Nov 16 '10 at 20:35
show 1 more comment
feedback

Your Answer

 
or
required, but never shown
discard

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