Passing Jquery Correctly To Anonymous Functions In WordPress
The Problem with $ in Anonymous Functions
A common issue that arises when working with jQuery in WordPress is losing the reference to the jQuery object ($) inside of anonymous functions. Since anonymous functions create their own scope, the $ variable no longer refers to jQuery as intended.
For example, the following code sample will not work correctly:
jQuery(document).ready(function($) {
// $ does NOT refer to jQuery here
$('div').hide();
});
The anonymous function overrides the $ with the passed parameter, breaking reference to jQuery. This causes jQuery code inside the function to fail or not behave as expected.
Using jQuery Instead of $
To avoid issues with $ variable scope in anonymous functions, the jQuery object itself can be passed directly:
jQuery(document).ready(function(jQuery) {
// Use jQuery instead of $
jQuery('div').hide();
});
Now jQuery is available inside the function and code will work as intended. This avoids scope issues by directly passing the full jQuery object by name.
More Examples Passing jQuery to Anonymous Functions
jQuery can be passed to any anonymous function in WordPress:
function my_init_function(jQuery) {
jQuery('p').addClass('special');
}
jQuery(document).ready(my_init_function);
For event handler assignments:
jQuery('button').on('click', function(jQuery) {
jQuery('div').toggle();
});
Or in boilerplate themes or plugins:
(function(jQuery) {
// Functions and code with access to jQuery
})(jQuery);
Wrapping Code in Immediately Invoked Function Expressions
Immediately Invoked Function Expressions (IIFEs) can also provide local scope to allow access to $ as jQuery in anonymous functions.
IIFE structure:
(function() {
// code here
})();
Any code inside an IIFE can safely use $ instead of jQuery:
(function($) {
// $ is jQuery
$('div').hide();
})(jQuery);
No conflicts with other JavaScript libraries will occur since everything is wrapped in a local IIFE scope.
IIFE Examples in WordPress Themes and Plugins
Here is an example IIFE usage in WordPress plugin development:
(function($) {
$('#plugin-form').submit(function() {
if ($('input[type="checkbox"]').is(':checked')) {
// form stuff here
}
});
})(jQuery);
And usage within a custom theme:
(function($){
$('#main-menu li').on('click', function() {
// toggle dropdown
})
})(jQuery);
Binding jQuery to $
As an alternative to passing jQuery directly, the jQuery.noConflict() method can be used to bind jQuery to $ inside anonymous functions.
Example Usage:
jQuery.noConflict();
(function($) {
// $ is now an alias to jQuery
$(document).ready(function() {
$('div').hide();
});
})(jQuery);
Usage in Themes and Plugins
In themes:
jQuery.noConflict();
(function($) {
$('#theme-slider').slick({
// plugin code using $ as jQuery
});
})(jQuery);
In plugins:
jQuery.noConflict();
(function($) {
$('#plugin-form').submit(function() {
// form code using $ as shortcut
})
})(jQuery);
Recommendations for Referencing jQuery
When working with jQuery in anonymous functions within WordPress, there are a few best practices to follow:
- Use jQuery instead of $ for broad compatibility
- Wrap code in IIFEs to isolate $ as jQuery safely
- Bind jQuery to $ inside IIFEs if you prefer using the shortcut
- Pass jQuery itself to anonymous functions to avoid losing scope
In themes, $ can be used directly instead of junctions or IIFEs since theme code usually runs with jQuery ready. But use caution if writing reusable theme components.
In plugins, always use jQuery, IIFEs, or pass jQuery as a parameter for better compatibility with different environments.
Example Plugin Code
Here is example code for a plugin using the best practices covered in this article for working with jQuery inside anonymous functions and allowing for No Conflict compatibility:
// Ensure jQuery compatibility
jQuery.noConflict();
// IIFE isolates jQuery usage to plugin scope
(function($) {
// Use $ as alias to jQuery
$.fn.myPlugin = function() {
return this.each(function() {
// Plugin code binds handlers safely with $
$('.plugin .button').on('click', function() {
// More code using $ as jQuery
});
});
};
// Pass jQuery to plugin init
})(jQuery);
// Initialize the plugin
jQuery(function($) {
$('.container').myPlugin();
});
This example demonstrates several options: jQuery is passed by name on initiation, bound to $ inside an IIFE, and passed as a parameter to allow modular code to use $ as an alias without risk of conflicts.
By following these best practices, jQuery can be used reliably and safely within anonymous functions and avoid the common pitfalls with $ variable scope in WordPress.
