Much has been said on the subject of properly registering and enqueueing scripts in WordPress, so I hate to write yet another “including jQuery in WordPress the right way” post, so I’ll attempt to cover it from a different angle.
Because jQuery ships with WordPress, it’s really just a simple matter of making sure you call:
wp_enqueue_script( 'jquery' );
In your functions.php
file.
But that’s really only half of it. After that, you have a matter of actually setting up your JavaScript source.
I’m assuming that you have a file named theme.js
and that it’s being enqueued just after the jQuery enqueue so that your functions file looks like this:
wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'theme-js', get_template_directory_uri() . '/js/theme.js' );
After that, it’s important to make sure that you’re properly setting up the JavaScript file itself.
jQuery in WordPress The Right Way
If you look around the web, you’re like to see several ways of doing this.
Using jQuery.noConflict
One way that developers like to make sure they aren’t interferring with other scripts is by taking advantage of the jQuery.noConflict method.
The advantage to doing this is that it relinquishes the $
function so that you can use whatever variable you want to represent jQuery, but the problem is that developers don’t often restore the variable at the end of their script thus potentially breaking any script that’s included after it.
Using The $.ready Function
Using the $.ready function is actually supposed to be used whenever we want to fire a function as soon as the DOM is loaded. The thing is, a lot of developers actually use this in several ways.
One way is by doing this:
$(document).ready(function () { /* Code here */ });
A second way is by doing this:
$(function () { /* Code here */ });
But there’s a problem with doing this: It assumes that the jQuery function hasn’t been relinqushed by using the noConflict
method demonstrated above.
The Anonymous Function Call
When you’re working with jQuery and WordPress, there are two things that can be guaranteed: WordPress has it included and you can access it via the original jQuery
function.
To be complete, you can enqueue your theme JavaScript by making sure jQuery is enqueued first:
wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'theme-js', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ) );
From here, all other JavaScript-strategies are off the table. Simply stub the file out like this:
;(function ($) { // Example of how to call the $.ready function $(function () { }); }(jQuery));
The first semicolon guarantees that all other JavaScripts will be properly terminated prior to invoking your own function. Technically, this point could be argued but that’s outside the scope of this post.
Secondly, this method guaranteed that you’ll have access to the $
as jQuery
is passed as an argument into the anonymous function and then referenced by $
.
Finally, the anonymous function will not cause conflicts with any other plugins, libraries, or scripts as it’s fully encapsulated.
Leave a Reply
You must be logged in to post a comment.