Awhile back I was testing some really nice jQuery scipts that I must have played around with for hours. I knew I had the integration right. I checked, re-checked, and checked again. They just wouldn’t work. I thought I might have missed a single or double quote, or even a closing tag because that is pretty easy to do.
Turns out it was because WordPress has jQuery configured in noConflict mode. I sure wish that I would have thought of that earlier. It would have saved me a lot of time.
So, for my WordPress friends that might be trying to include a jQuery plugin (not a WordPress plugin, but an actual jQuery.something.js file) without any luck …
If you can’t get it to work there is a good possibility it’s because the jQuery library included with WordPress is set to noConflict() mode to prevent compatibility problems with other JavaScript libraries.
What this means is the $ global shortcut for jQuery doesn’t work.
Example (wont work):
|
1 2 3 |
$(document).ready(function(){ $(#somefunction) ... }); |
To make it work with WordPress you can do any of the following:
Change $’s to jQuery:
|
1 2 3 |
jQuery(document).ready(function(){ jQuery(#somefunction) ... }); |
Use A Wrapper (executed when DOM is fully constructed):
|
1 2 3 4 |
jQuery(document).ready(function($) { // Inside of this function, $() will work as an alias for jQuery() // and other libraries also using $ will not be accessible under this shortcut }); |
Use Another Wrapper (executed immediately without waiting for DOM ready event):
|
1 2 3 4 |
(function($) { // Inside of this function, $() will work as an alias for jQuery() // and other libraries also using $ will not be accessible under this shortcut })(jQuery); |
Reasign jQuery another shortcut (Add to top of script):
var $ = jQuery.noConflict();
or:
var $ = jQuery;
Example:
|
1 2 3 4 |
var $ = jQuery.noConflict(); $(document).ready(function(){ $(#somefunction) ... }); |
or:
|
1 2 3 |
var $ = jQuery; $(document).ready(function(){ $(#somefunction) ... |
For more information you can check this link over at WordPress.org:
jQuery noConflict Wrappers
Hopefully this will help a few others out there, and prevent a few headaches too!
I am the site owner and administrator of DialMe.com. I provide help and tips for Boonex Dolphin on the main part of this website where you will also find an assortment of other resources. Here, on the blog I write about a variety of topics surrounding WordPress, technology, social media/networking, SEO, and webmaster resources.
