15

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!

Improve this question
2
  • This should be retitled to something like "How to Link External jQuery/Javascript files with WordPress."
    – MikeSchinkel
    Commented Aug 17, 2010 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
    Commented Aug 18, 2010 at 9:51

3 Answers 3

Reset to default
9

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.

Improve this answer
6
  • 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
    Commented Aug 17, 2010 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
    Commented Aug 17, 2010 at 14:08
  • Good stuff, I'll update my answer. I almost suggested wrapping the enqueue in is_admin().
    – user66
    Commented Aug 17, 2010 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
    Commented Aug 17, 2010 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
    Commented Aug 18, 2010 at 11:55
7

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.

Improve this answer
6
  • 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
    Commented Aug 17, 2010 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.
    – Travis Northcutt
    Commented Aug 17, 2010 at 16:56
  • Yes I just found the 5 tips for jquery / wp post, thanks for your answer :-)
    – Ben Everard
    Commented Aug 17, 2010 at 17:34
  • 5 Tips for using jQuery with WordPress -- the link isn't working any longer.
    – hakre
    Commented Nov 12, 2010 at 22:52
  • NOTE: The example includes an "older" version of jQuery, current WP version(3.0.1) is running jQuery 1.4.2 ...
    – t31os
    Commented Nov 17, 2010 at 15:06
1

Though @tnorthcutt is correct that you should properly dequeue WP's native jquery if you want to load your own, you are certain to run into issues when you are loading a different jquery version that WP core. Both core and plugins rely on it being there. So if you don't update your theme with the newest jquery every time WP is updated, your site may break.

The following code will make sure your theme always loads the correct version of jquery, by first looking up which version WP is using and then loading that one from Google:

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // fallback, just in case 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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