Using jQuery Plugins with Wordpress

Question

Having a bit of trouble using jQuery plugins (Superfish, jQuery UI, etc) using Wordpress. Everything works fine in my plain non-Wordpress site, but Wordpress seems to conflict with JQuery. There must be some way to get around this.

Also, I'm using Carrington Framework, if that makes a difference.

In Safari's web inspector, I get these errors:

ReferenceError: Can't find variable: jQuery
ReferenceError: Can't find variable: $

Answer 1

Wordpress and jQuery wouldn't conflict with each other. Wordpress is on the server, jQuery is on the client and aside from dealing with the HTML returned by Wordpress the two don't really have much to do with each other. You would get that error if the javascript that defines the jQuery object wasn't properly loaded / parsed by the browser. Three troubleshooting solutions:

1. Check and make sure that your client is making the request for the jQuery javascript file. If not then the script tag requesting the file may not be included correctly in your page.
2. If it is making the request, make sure it's successful. If the response is a 404 code or some other error, fix whatever is causing it (bad url, incorrect permissions, ect.)
3. I've noticed that when using the minified version of jQuery, the browser occasionally throws an error when trying to parse the code, leading to the reference error you are experiencing when you try to use the jQuery function later in the code. If you are using the minified version of jQuery, try switching to the uncompacted version and see if that solves your problem.

Answer 2

Just put all of your js under the

<?php
    wp_head(); 
?>

section. If you have any problems in individual files, all the line:

var $j = jQuery.noConflict();

to the top.