Have you recently upgraded Wordpress and noticed that all of your jQuery functions have stopped working? If your error console reports that “$ is not defined”, then I may have an easy solution for you!
If you did not know, jQuery is part of the default Wordpress package. So, you may have unknowingly included the jQuery library from another location. Uh oh! Two instances of jQuery being called is no good. We need to stop one of those from loading at the top of your page. In this article, we’re going to get rid of the one you’ve included from elsewhere, and use the version that came with Wordpress. Before reading on, open up your website, view the source code, and find out if there are multiple instances of jQuery being called.
From this point on, I’m assuming that you have one call to the jQuery library, and it is the one that came with Wordpress.
So, what makes the Wordpress version of jQuery different? You may be used to invoking jQuery code by using the dollar sign $. For example, a line of code may appear like this: $(“#myId”).show(“fast”);. The Wordpress version took away this behavior so that jQuery would be compatible with other JavaScripts libraries that also use the dollar sign.
Ok? So if I can’t use $, what do I do? Well, one method is replace ‘$’ with ‘jQuery’. Going back to my first example, the code would change to this: jQuery(“#myId”).show(“fast”);.
You might be thinking, “Hey! That’s a lot of code to change, bub. Harumphhh.”
Hold onto your harumphhhs, my friends. There is an easier way that allows you to keep on using your friend, the dollar sign, given that your code is placed within jQuery’s “ready” function. Send the dollar sign as a parameter within your ready function, like so:
jQuery(document).ready(function($){ $("#myId").show("fast"); });
The $ will stay in scope to any functions you place within that function as well.
This will probably fix a lot of your code right out of the box, but in some cases where you run into issues with scope, you may just have to do a “find and replace” on your code. I hope this points you in the right direction. Happy jQuery coding!
