Using jQuery in your WordPress plugins

by Curtiss   |   last updated May 3, 2011   |   PHP Tutorials ·

This evening on Twitter, @viper007Bond posted a quick tip about using jQuery in your WordPress plugins (also applicable to themes). His initial tweet was:

Using jQuery in your WordPress plugin? Make sure you’re using quotes in your selector strings! http://api.jquery.com/category/selectors/

Then, @dimensionmedia, @viper007Bond and I had the following brief conversation:

Me:

It’s also helpful if you use the jQuery that’s included with WordPress, instead of including your own copy :)

@dimensionmedia:

or if you use another jQuery version, at least deregister WP’s version first (although i’ve never had the need).

@viper007Bond:

And wrap that deregister in a !is_admin(). Always use core jQuery when in admin area.

@dimensionmedia:

that all just felt like a nice, warm WordPress Public Service Announcement. Knowing is half the battle. GO JOE!!!

So, what does all of that mean? Let me break it down a little bit.

First of all, as @viper007Bond mentioned in his initial tweet; you want to make sure you use quotation marks to wrap all of your jQuery selectors. To properly select something in jQuery, you need to use quotes around the item you’re trying to select. Otherwise, JavaScript will assume you’re trying to use a variable; and will throw an error.

If you’re using an attribute selector, you’ll need to use two sets of quotes; one to wrap the entire selector string and a second to wrap the value of the attribute you’re searching.

For instance, to select all items with a class of “hello” and “world” as their name attributes; you would use the following code:

$('.hello[name="world"]')

Keep in mind, you will need to use two different kinds of quotation marks (either single quotes on the outside and double quotes on the inside or vice versa); otherwise the inner set of quotation marks will stop and restart the quoted string, leaving everything inside of the second set of quotation marks actually unquoted.

Then, if you are going to use jQuery, you should keep in mind that WordPress ships with a version of jQuery included. To use it, you simply need to enqueue it. Assuming you’re going to use a JavaScript file with your own custom code as part of your plugin, it’s even simpler. You simply need to include ‘jquery’ in the array of dependencies for the JavaScript file you’re including in your wp_enqueue_script() call.

If you simply can’t live with using the version of jQuery that ships with WordPress, you need to make sure you properly deregister that version before including your own. The following code snippet from the WordPress Codex shows exactly how you should do that.

<?php
function my_init_method() {
    if (!is_admin()) {
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js');
        wp_enqueue_script( 'jquery' );
    }
}    

add_action('init', 'my_init_method');
?>

Finally, if you do choose to use your own version of jQuery, make sure you only do so on the site itself; don’t use your own version in the admin area. If you deregister the built-in jQuery within the admin area, a lot of pieces of the WordPress admin interface will quit working. That’s why, as shown in the code snippet above, the wp_deregister_script(), wp_register_script() and wp_enqueue_script() calls are all wrapped inside of an if statement checking to make sure is_admin() is not true.

I hope this will help some new plugin and theme authors in figuring out how to use jQuery in their creations.