If you want, you can just download jQuery, put it on your server and link to it from your header.php file in the <head> section. But that can cause you grief. For one thing, some plugins use the jQuery library, and they are going to load it as well. This can cause problems. How was your plugin to know you already had it loaded?

Another thing is that WordPress already includes a copy of jQuery. Here is how you can load up jQuery in your theme the smart (and intended) way. Put the following code in your header.php file in the <head> section:

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

Your theme probably already has the wp_head function, so just make sure you call the wp_enqueue_script function BEFORE that. Now you are all set to call your own jQuery JavaScript file, AFTER the wp_head function.

You are ready to rock, but there are still some considerations. For example, safeguarding yourself from the future possibility of conflict with other libraries. You really shouldn't be using multiple JS libraries to begin with, but... better safe than sorry.

To be super-safe, you can put jQuery into "no conflict" mode and use a different shortcut for jQuery. In this case "$j" instead of the default "$". The standard "$", for example, can conflict with Prototype. Here is an example of a safe bit of jQuery JavaScript:

Isn’t it also a good idea to use the version google spreads, or the latest version via jquery instead of the own hosted jquery-instance. That way, if more sites use this method, the js-file gets cached and makes the page load faster ..

There’s a plugin for WordPress called “Use Google Libraries”. If you want to use that, do so. It’ll replace the references used by WordPress with the Google hosted versions.

Using that plugin and doing the enqueue approach is the best way, because the enqueue approach takes care of dependencies, loads things in the correct order, and ensures that plugins and themes don’t conflict with each other by only loading each library once.

Good idea, but it’s probably still better IMHO to load a minified version of jQuery and not the unpacked full source.

I personally pull it from http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js and use a remove_acction() for those plugins that load it again. In all reality thought, I don’t use a lot of plugins that use jQuery other than the ones Envato commissions third parties for, or the ones I write myself. So I guess my situation is not cookie cutter.

In any case, I can see this being useful though in situations where you might not have as much control as you like over jQuery being loaded in your theme.

Nice to know, I hadn’t done this because I stick all my JS just before the closing body tag. If plugin authors were to insert their JS into the wp_footer tag area, we’d be onto a real winner performance-wise (YSlow).

WordPress’ wp_enqueue_script function can also load your own script for you that depends on jQuery, without making two calls to wp_enqueue_script. There is also a bool at the end that tells WordPress to load your script with the wp_head hook or the wp_footer hook. (In the example, the true as the last argument in wp_enqueue_scripts tells the script to load in the footer section. If you set this to false, it will load in the headers section.)

Remember when you include the internal version of jQuery that comes with WordPress this way, it’s in noConflict mode so your scripts won’t be able to use the “$” shortcut, which may be your problem, see the above article.

If you’d rather not deal with this, you could link to a version of jQuery that isn’t in noConflict mode, such as linking to it from Google.

Also, congrats on winning one of the prizes in the CSS-Tricks giveaway, did you get my email on that?

I have tried this trick every which way ! and it doesn’t work for me using WP 2.8.2:

<script type="text/javascript"
src="/js/myScript.js”>
My theme just works like jQuery wasn’t loaded and checking with FF it looks like it is loaded !
Any ideas why ? and how to make it work so I don’t load jQuery twice.(which works but slows loading pages )
Thanks

I have tried this trick every which way ! and it doesn’t work for me using WP 2.8.2 and your code exactly as advised above.
My theme just works like jQuery wasn’t loaded and checking with FF it looks like it is loaded !
Any ideas why ? and how to make it work so I don’t load jQuery twice.(which works but slows loading pages )
Thanks

Thank you for the tips. They’ve gotten me part of the way there. But, like jean I have tried this every which way and just cannot get it to work. I am using it in a plugin and I understand from another blog that these techniques apply.

The line in the plugin that was causing me problems is as follows:

echo "\n";

I commented it out and instead wrote:

this solution solved the conflict problem, but now the plugin doesn’t work.

hmmm. Well, I got it to work – love a fresh start on a new day. I am using the following:

WP 2.7 – and using wp_enqueue to load jquery, jquery-ui-core, jquery-ui-tabs, and jflow. I had to load jquery first, since jflow depends on it. Loaded jflow Second, then loaded the ui-core and ui-tabs in that order. I swear i tried this a million times last night to no avail, but it seems happy now…

I thought maybe the ordering was causing the problem – perhaps it was just a cache issue. Good luck all! Great blog by the way…

I should mention I’m not very skilled with jquery or javascript :P. Can it be dumbed down any more for those like me? Like there are multiple references to jquery throughout the theme and some plugins, am I meant to replace them?

I’m a bit confused about the no-conflict stuff. I know what the no-conflict function does, and I see what the enqueue WP function does. But what I don’t understand is what the end result of WP being in “no-conflict mode” by default is?

If I set my no-conflict string to be $foo, then every time I want to use a jQuery function I should use $foo(function()). Yet before reading this article I had been using WP’s included jQuery (loaded with enqueue) and just $(function()).

I guess the question is really this:

If WP puts jQuery into no-conflict mode, what is the custom string I’m supposed to use?

I am just experimenting with a new design, since the current one is a bit old (been using it the past 3 years). So far I hesitated to implement new themes and functions since I am really no expert when it comes to css, etc.
I struggled quite some time to get jquery activated, but the adive in this post and in the post helped me out quite a bit!

Recent Posts

Random Posts

Authors

Chris Coyier is a real-world web designer who has been reaching for WordPress to power client sites for many years.
He subscribes to the theory that not only is WordPress capable of powering any website it is almost always the right choice.
More »

Jeff Starr is a professional developer, designer, author, and publisher with over 10 years of experience.
He works with WordPress on a daily basis to create high-quality sites with a focus on performance, security, and web standards.
More »