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 <script> line that loads the core jquery script (either from within the site, or using a CDN version like from Google), and then one or more jQuery-based scripts that add a certain functionality.
For example:
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
<script type="text/javascript">file into the header.php (WordPress) or html.php (Drupal) template files, or even just paste it into the body of one of your nodes, it’s not recommended.
Why? Because it’s best to let WordPress handle all the javascript files itself. That way it knows the right order to put them in for example. This is important because your jQuery plugins need to be loaded after the main jQuery file in the page order, otherwise you’ll just get an error as the browser won’t understand any jQuery functions until it knows what jQuery is. If you paste the script tag in the header.php or the body content of the node then it may well appear before the main jQuery script if your js scripts are set to load at the bottom of your page rather than in the head (which is the recommended way of doing it). Here’s a guide on how to enqueue your javascript and jQuery scripts properly in WordPress.
Troubleshooting
As soon as one bit of javascript on your page goes wrong, it can have a knock-on effect on other elements on there and cause them to break. If your sliders aren’t sliding (or worse still, they’ll probably display all of the slides in a column down the page) or your jQuery buttons don’t do anything, then pinpointing the error is your first priority.
Google Chrome’s Developer tools are really useful for this. In Chrome, right-click anywhere in your page and select ‘Inspect Element’. When the Developer toolbar opens, click on the ‘Console’ tab. If there’s something wrong with your javascript you’ll find out what here. Even if you don’t understand the problem, you can copy and paste the error message into Google – you’ll be amazed how often you’ll find the answer within 5 minutes.
Here’s some common errors you’ll see:
(Uncaught ReferenceError: jquery is not defined)This means that your core jQuery file isn’t being loaded properly, or it is being loaded too late in the page. It is usually caused by number 3 above – if you aren’t enqueuing your js files properly and have just pasted a line like
<script src="js/jquery.sticky.js"></script>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.
