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 <script> tag. Rather make use of the wp_enqueue_script function included in the WordPress core which allows you to safely reference your Javascript scripts. I recently wrote an article entitled Using Javascript libraries with your WordPress plugin or theme which explains the wp_enqueue_script function.
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 <script> tag into the <head> section of the page referencing the jQuery library by including the “jquery.js” source file.
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.
$myjQuery = jQuery.noConflict();
</script>
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!
December 16th, 2008 at 10:59 pm
不错不错WordPress : Using jQuery library with your plugin or theme
July 15th, 2009 at 9:29 pm
what could be the problem with this “”
I’ve also tried using for me to define the exact location of the jquery.js but still doesn’t work for me. any comment?
September 26th, 2009 at 6:20 pm
Im having a jquery conflict on my feature content glider! The glider jquery is conflicting with photosmash galleries and lightbox-pro in wordpress.mu root page.
I tried the tutorial but not sure where to place the code, I have placed it in the header.php but it hasnr worked yet!
can you help me?
September 29th, 2009 at 3:56 am
@Mitch,
You can try the WordPress slideshow gallery plugin which I recently developed and released.
September 29th, 2009 at 4:06 am
Nice, can I hook it up with the 3 slide tabs on the top root.
Check it out at Thaub.com. Contact me through that if you can help.
Thanks
November 3rd, 2009 at 2:53 am
Oops – I mis-wrote.
The main page of my site does get an ‘A’ from YSlow… it is the pages that contain a little more ‘behaviour’ that get a B (score of 86).