WordPress : Using jQuery library with your plugin or theme

When you develop a WordPress plugin or theme, you might want to make use of the jQuery library included and distributed with the WordPress package.

The jQuery library is located inside the “wp-includes/js/jquery/” folder. Even though you know what the location of the jQuery library is, I do not recommend that you reference this script using a

So, first off, fire the wp_enqueue_script function in order to safely reference your jQuery library to ensure that the jQuery core is available for usage with your plugin or theme. Other plugins might fire this function with the same handle in order to use jQuery, but you don’t know this and you aren’t sure what other plugins your users will be using, so you have to be sure that it is included.

Ultimately, WordPress will insert a

Next thing to do is prevent conflicts between libraries. By default, jQuery is used with a global variable which is a dollar sign. See the example below which shows (makes visible) an element on the page with the ID “mydiv”.


Unfortunately, it is expected that this will conflict with other libraries which are also included and distributed with WordPress such as Prototype and Scriptaculous. WordPress (2.5+) don’t use these libraries on the front end or in the administration panel, though other third party plugins or the current theme which you are using might make use of these libraries which will result in a conflict between the libraries, causing a Javascript error on the page and terminating the execution of all other Javascript on the page.

A great workaround for this is to make use of the jQuery noConflict() method which allows you to create a new global Javascript object which is practically a jQuery instance on its own. See the example code below which shows you how to create this new, global object.

With that done, you can now use this object instead and be confident that there won’t be any conflicts between the jQuery library and other libraries inside WordPress. Below is the modified code for making the element with the ID “mydiv” visible as shown earlier.


I hope this helps! Best of luck and feel free to post your comments!