Using jQuery with WordPress

March 29, 2013 — 3 Comments

You’d be surprised, but even today many developers are loading jQuery within WordPress incorrectly. This is a massive problem resulting in a lot of blood, sweat and tears across the WordPress developer community. Time is money, and many hours have been lost debugging these issues. In-fact, I wouldn’t be afraid to say that it probably the number one cause of plugin/theme conflicts.

As a plugin and/or theme developer, it is your responsibility to use jQuery correctly within your projects. Not doing so will cost you time & effort debugging conflicts, and your users won’t like you for it (I’ve been there, it’s not pleasant). There are no excuses, do it correctly. This is how.

Loading jQuery

Probably the most common mistake developers make is loading jQuery by printing the “<script>” tag into the header. Never do this! If you do, any plugin/theme that requires jQuery will be broken as a result of your mess. This is because jQuery will be loaded twice, which will throw errors and break stuff. Instead, use the PHP code below.

add_action( 'wp_enqueue_script', 'load_jquery' );
function load_jquery() {
    wp_enqueue_script( 'jquery' );
}

Using No Conflict Mode

As WordPress loads jQuery in No Conflict Mode, it is important that we have coded our jQuery-dependant scripts correctly to accommodate this. This is really simple.

If you want your code to be executed after the document has been loaded, use the code below.

jQuery(document).ready(function($) {
    // Code here will be executed on document ready. Use $ as normal.
});

If your code is to be executed in an anonymous function, make sure you pass jQuery as an argument as outlined below.

(function($) {
   // Your jQuery code goes here. Use $ as normal.
})(jQuery);

And that’s it!

What if I need a specific version of jQuery only?

Then your script shouldn’t be included in a WordPress plugin or theme. If you can’t support future versions of jQuery, then you’re plugin/theme is going to cause problems in the future. One of the biggest problems WordPress faces is the “fear” of updating, and the process of picking up the pieces of old, defunct plugins after the damage has been done. If you’re forcing users to use a specific version of jQuery, despite what other plugins/themes require, you’re adding to the problem.

What about loading jQuery from Google CDN?

A lot of people do this for various different reasons. In-fact, I have too in the past. But having learnt from my own experiences, I’d recommend you don’t do it. As mentioned, WordPress loads jQuery in No Conflict Mode, jQuery loaded from Google doesn’t. This will cause problems.

Now, you’re enlightened! Spread the word!

3 responses to Using jQuery with WordPress

  1. WordPress loads jQuery in noConflict mode. Thats good to know. Thank you for the article

  2. Thanks. This helped me get jscrollpane working the right way with wordpress.

  3. Dear Matthew

    Thank you for posting this article. After getting lost browsing countless posts on how to include jQuery to WordPress this really helped me put things in order.
    Keep it up!!

Leave a Reply

*

Text formatting is available via select HTML.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>