Learn to quickly and easily implement custom jQuery into your wordpress template footers with this workaround.
A lot of people struggle with implementing their custom jquery within the WordPress framework, but it doesn’t have to be so hard. The confusion starts with the framework’s insistence on replacing the $ with jQuery in what they call “compatibility mode”. This makes adding custom code to the framework a bigger process than it really needs to be. First, you need to “enqueue the script” then replace all your $ with jQuery and then your jquery should work. Supposedly.
However, that can be more than just a daunting task. Despite the fact that this is supposed to enable compatibility, many plugin and template developers do not use it, which can make finding and replacing the right code overwhelming in some cases to say the least.
An easier thing to do would be to simply wrap your code in a special function that temporarily maps the dollar symbol, enabling you to write your code freely inside of it. After all, you are adding custom code at the end of the document, which is the best way to harness the entire DOM.
The Old Way
The original, and “proper” method of using custom jQuery in WordPress requires you to insert the following into your functions.php file:
wp_enqueue_script("jquery");
And then you would write your jQuery code as the following, replacing $ with jQuery:
This
/* normal jquery */
$('.main').fadeIn();Becomes this
/* wordpress safe jquery */
jQuery('.main').fadeIn();
As you can see, even if you automated replacing the characters in all relative template files, you could still run into compatibility problems as we’ve learned through testing.
The New Way
As we said above, the problem is that not everybody uses compatibility mode, so it’s essentially quicker and easier to simply wrap your code in a function and plop it into your template’s footer (typically called footer.php).
(function($) {
$(‘.main’).fadeIn();
})( jQuery );
In the event that your must place your jQuery in the header, you can always wrap it with a document.ready function like so:
jQuery(document).ready(function( $ ) {
$(‘.main’).fadeIn();
});
And there you have it — easy customized jquery without all the hassle!