WordPress & jQuery: Fix JavaScript error “$ is not a function”

When using jQuery in WordPress you might be surprised by a

$ is not a function

JavaScript error.

For example, in a default WordPress 3.3.1 installation, the following JavaScript code leads to this error:

$(document).ready(function() {
  console.log($("body"));
});

The reason is, that WordPress by default uses jQuery’s “no conflict mode” to avoid compatibility problems with other JavaScript libraries that might could also use the $ variable. In detail, the jQuery script source included in WordPress activates this mode by calling jQuery.noConflict() (for WordPress 3.3.1 see line 5 in http://core.trac.wordpress.org/browser/tags/3.3.1/wp-includes/js/jquery/jquery.js#L5).

To fix the error replace jQuery’s $ shortcut by jQuery. Optionally, you can add a $ parameter your handler functions to define the $ shortcut inside the functions:

jQuery(document).ready(function($) {
  console.log($("body"));
});