How to use jQuery in WordPress: a beginner’s guide

How to properly add jQuery to your WordPress theme or plugin

The right way to load jQuery is by enqueueing it in your theme’s functions.php file or inside a plugin.

Enqueueing jQuery in a theme

Here’s how to enqueue jQuery and your own custom script in a theme:

function mytheme_enqueue_scripts() {
  // Load WordPress’s built-in jQuery
  wp_enqueue_script(‘jquery’);

  // Load your custom script that depends on jQuery
  wp_enqueue_script(
    ‘custom-script’,
    get_template_directory_uri() . ‘/js/custom.js’,
    array(‘jquery’),
    null,
    true
  );
}
add_action(‘wp_enqueue_scripts’, ‘mytheme_enqueue_scripts’);

This code does a few important things:

• Ensures jQuery loads before your custom script (via the dependency array)
• Loads your script from /js/custom.js in your theme
• Loads the script in the footer (true = before </body>)

Enqueueing jQuery in a plugin

If you’re building a plugin, the process is nearly identical—just use plugins_url() to set the path:

function myplugin_enqueue_scripts() {
  wp_enqueue_script(‘jquery’);
  wp_enqueue_script(
    ‘plugin-script’,
    plugins_url(‘js/plugin-script.js’, __FILE__),
    array(‘jquery’),
    null,
    true
  );
}
add_action(‘wp_enqueue_scripts’, ‘myplugin_enqueue_scripts’);