How to use jQuery in WordPress Themes

jQueryOn a standalone (non-WordPress) project you’d import the jQuery library in the head tag, then call a jQuery function towards the bottom of your file.

This approach isn’t working in WordPress.

Since jQuery and many other useful libraries are already part of WordPress, there’s no need to link to your own copy. Instead, you need to “enqueue” such scripts before the closing head tag (and before wp_head() is called). This is done in your theme’s header.php file:

wp_enqueue_script("jquery");

Every additional library must be called separately, such as jQuery UI components.

Then in your footer.php file, just before the call to wp_footer(), trigger your script like this:

Note that the usual $(document).ready(function() or $function() will not work in WordPress.

Thanks to Joseph Lowery for this tip.

For a full list of which scripts you can enqueue, check out this article from the WordPress Codex.

Jay is founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or drawing on tablet devices.

He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.

Jay is founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or drawing on tablet devices.

He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.