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!
Share + 6 Comments + Tags: JavaScript, jQuery, Wordpress
thank you for sharing. I did not upfrade yet my wp due to various plugins I used that may be incompatible with 2.8.
Thanks for sharing this. I just happened to look at your blog this morning after spending 20 frustrating minutes trying to solve a jQuery problem. Your code helped me fix it.
Thank you! This magically solved my problem after hours of troubleshooting. But something’s strange with how mine worked. The following worked for me:
jQuery(document).ready(function($){
jQuery(‘#photos’).galleryView({
But this didn’t:
jQuery(document).ready(function($){
$(‘#photos’).galleryView({
Wondering if I’m missing something, or if this is fine, or what your thoughts may be on that.
Hi Joe. My solution was meant to save you time when updating code, but I’m glad you found a solution that worked for you. Using jQuery instead of $ should be just fine. If my solution doesn’t work, then I don’t see a need to pass the $ sign to the ready function. So you could use this:
jQuery(document).ready(function(){ jQuery(’#photos’).galleryView({…
I am stumped – I tried playing with some of the suggestions for jQuery I have found, but I still have an error with Firefox. Explorer seems to work great. I know the problem is probably staring me right in the face, but I’ve lost hours on this so far and just don’t get it. Any suggestions? The page is:
http://www.jamesscottfleming.com/architecture.html
Update: problem solved – I have other problems, but not necessarily with jQuery.