WordPress Plugin Development - How to use JQuery / JavaScript?

Question

Just started developing a plugin for WordPress, wanted to use some JQuery in the Plugin Admin interface.

How do I properly include and call JQuery?

For instance, on a normal HTML page I would just include the JQuery library, then call this script:

$(document).ready(function(){
    alert('Hello World!');
});

How can I do this in a WordPress Plugin PHP file?

Answer 1

Firstly, you always have to use a no-conflict wrapper in Wordpress, so your code would look like :

jQuery(document).ready(function($){
    alert('Hello World!');
});

Secondly, it's good practice to put your javascript in external files, and in a Wordpress plugin you would include those like this :

wp_register_script( 'my_plugin_script', plugins_url('/my_plugin.js', __FILE__), array('jquery'));

wp_enqueue_script( 'my_plugin_script' );

This includes your script, and sets up jQuery as a dependency, so Wordpress will automatically load jQuery if it's not already loaded, making sure it's only loaded once, and that it's loaded before your plugins script.

And if you only need the script on the admin pages, you can load it conditionally using Wordpress add_action handlers:

add_action( 'admin_menu', 'my_admin_plugin' );

function my_admin_plugin() {
    wp_register_script( 'my_plugin_script', plugins_url('/my_plugin.js', __FILE__), array('jquery'));
    wp_enqueue_script( 'my_plugin_script' );

    // do admin stuff here
}

Answer 2

It is not recommended to be using your own jquery version.

WordPress includes its own version of jquery and many other similar JS files, which have all been rigorously tested with WP and many of the most common plugins. In order to provide the best compatibility and experience for our users, we ask that you not package your own (especially not an older version) and instead use wp_enqueue_script() to pull in WordPress's version.

So you should use this instead:

wp_enqueue_script('jquery')