Once you start to find your feet with website management you’ll come across loads of jquery plugins that can make your site look much more interactive.
Plugging them into a WordPress or Drupal site is pretty simple once you know how to do it, but it can be a very frustrating experience if you don’t. Here’s where a lot of the common problems lie.
1. jQuery is already installed in WordPress and Drupal by default.
On many example sites that demonstrate the jQuery plugins you’ll see that a
The first one loads the main jquery framework. But it’s already built into WordPress and Drupal though, so if you try loading it again it will just add bloat to your site and is likely to confuse it.
2. jQuery $ conflicts
This is a common problem when loading the scripts into WordPress. jQuery reserves the $ sign as a variable for its own functions. That’s fine on simple sites, but in a CMS system like WordPress there may be other javascript functions that are also using $ as a variable. You need to make sure it recognises that it’s a jQuery script. You can replace all instances of $ with jQuery, but a better way is to wrap the whole script in a little function like this.
(function($) {
..your jquery script here
})(jQuery);3. Enqueuing the scripts
Whilst you can add the jQuery plugin script into your CMS site by just copying and pasting the
straight into the head section of your header.php file. Depending on which theme you’re using, it could load all the javascript files at the bottom of the page, not the top (this is recommended as it gives the actual content a chance to load first). So what’s happening now is that your jQuery plugin file will be loaded before the actual jQuery core one. It will be referring to jQuery functions, but the browser won’t understand what they are because it hasn’t loaded the main jQuery file yet.
(Uncaught TypeError: Property '$' of object [object Object] is not a function)This is usually caused by problem 2 above. You’re using a jQuery function but WordPress doesn’t properly recognise it as a jQuery one. Wrap the function in the jQuery wrapper outlined there, and look at the Page source code to check that your custom jQuery scripts are being loaded after the jQuery one is. Note that Drupal and WordPress will often combine and compress js files so you may need to click on each one to see which one has the main jQuery code in it.
Still stuck? Try isolating the problem by using a code playground like jsfiddle.net It’s really quick to set up an account there and it’s a great way of testing and tweaking sections of your code. If you get stuck then you can post your problem and a link to your jsfiddle on stackoverflow. You’ll be amazed how often you’ll get a reply and a fixed version of code within a day.
