jQuery Error: $ is not a function

This is a fun little jQuery error you’ll hit sometimes when you are trying to integrate jQuery into an already established system like Wordpress or Drupal, that is already using a Javascript library like prototype.  The problem is that you are hitting conflicts between the two libraries.  And most likely they are fighting over the $ .

Luckily, jQuery is prepared to handle this!  Good’ol jQuery.

jQuery has a “noConflict” mode, that will let all the jQuery content to run without using the $.  You just state that you are running in noConflict mode in your first line, then instead of using $(function(){…}, you replace the $ with jQuery, so it looks like this: jQuery(function(){….

Here’s a full example.

<script>

jQuery.noConflict(); // Tell jQuery you are going with noConflict mode.

jQuery(function(){ // Replace the $ with jQuery
jQuery(‘div’).doStuff();
});

</script>

This will allow the other library to use the $ without conflict.

The Wordpress White Screen of Death!

So there you are, happily updating your blog theme and BAM!

The Wordpress whitescreen of death!

The Wordpress white screen indicates that there is a problem with your current theme.  Unfortunately at this point, you can’t go change the theme to unbreak it, since the theme selector is just going to spit out PHP errors.  See the problem is, the database still has entries pointed to the “current” theme, which is either bugged, incomplete or gone.

Here are the symptoms:

• All Wordpress pages, posts, tags etc. bring up a blank white screen.
• There is no code or html output.
• The Wordpress Admin area still works. (which is a good thing).
• The Wordpress theme selector (Appearance -> Themes) page won’t load and spits out PHP errors.

What to look for:

Check to make sure your theme files are still in place.  Deleting the current themes directory, renaming the theme directory or moving the current themes directory to a new location will all cause this error.

If files were moved or deleted, the best thing to do is to just put things back where they were, switch to another theme, then do your changes or removal of the old theme.

If that’s not possible, you can go manually change the current active theme in the database.  The current template data is stored in the ‘options’ table, option_name “template”.  Just change it to the folder name of another theme.  It’s not pretty, but it works and will get you back up and running.