This article describes how to set up a custom JavaScript file in your theme in preparation for writing simple jQuery “glue code”.
What is Glue Code
There is a fairly common practice in Drupal site development called writing “glue code”. The idea is that, when developing a site, there will be a number of simple custom behaviors or workflow steps that you need to configure. Most of the time there is a module to achieve individual requirements, but the risk is that you can end up with a lot of extra code of dubious performance or quality akin to the Open Buffet Syndrome.
The risk of contrib
Contributed modules, since they are written for generic use, will often have more than 10 times the amount of code that you need for your custom installation. The extra code includes features and administration pages that you simply don’t need for your project.
My rule of thumb is if you can achieve a goal in 10 lines of code, don’t use a contributed module. As an example, this rule used to apply to the inclusion of Google Analytics code, until the available module became very useful and reliable. (Google Analytics module ships with Acquia Drupal which we use as a base for new projects.)
jQuery as Glue Code
I’ve been on the fringes of using jQuery for some time, simply not having the time to learn the fundamentals of the syntax and how Drupal uses jQuery and JavaScript. I finally nailed my knowledge recently using Drupal 6 JavaScript and jQuery.
This has opened up my ability to look for simple solutions to common problems. As I code solutions, I will blog some of them, and so here I’d like to explain the basic steps to setting up a custom JavaScript file for your theme, which I’ll refer back to in my future articles. I’m not going to go into depth, but I’ll certainly update this article if needed. I’d appreciate the offer of links to detailed articles which describe the same thing.
Enabling mytheme.js
How to get a JavaScript file to the page in a nice way. Replace any instances of “mytheme” with the name of your theme.
1. Tell your theme about your .js file
Go to your theme’s .info file. This file is located in the top level of your theme directory, eg. sites/emspace.com.au/themes/mytheme/mytheme.info. Add this line to the .info file:
scripts[] = scripts/mytheme.js
2. Add your file
In your theme directory, add a folder called “scripts” if it doesn’t exist. Now add an empty file called “mytheme.js”. The path to the file will be something like sites/emspace.com.au/themes/mytheme/scripts/mytheme.js
3. Clear the theme cache
Drupal needs to re-assess your theme. So you need to clear out it’s cache and force it to rebuild. One way to clear the theme registry is to simply save the theme admin page, which you’ll find here: http://example.com?q=admin/build/themes
4. Turn off JavaScript aggregation
In order to see the file being output to your page, you should turn off JavaScript aggregation on the performance page: http://example.com?q=admin/settings/performance. Disable the “Optimize JavaScript files” setting.
5. Confirm output
Now you should be able to look at your source HTML and see your file being included. It will appear like this:
To be extra sure, you can add something to mytheme.js as simple as:
// Test that my JavaScript file is being included.
alert(“I’m ready and waiting”);
You’re done
Now you are ready to add JavaScript snippets to this file.
