Adding a JavaScript File to a Drupal Theme

Drupal comes with the excellent and very powerful jQuery JavaScript library. jQuery really reduces the learning curve when it comes to adding fancy JavaScript effects to a Drupal site.

In this mini-tutorial I will show you how you can add a theme-based JavaScript file to your site so you can start to leverage the power of jQuery in your projects.

Instructions

Drupal 6

Drupal 6 already looks for a script.js file in the theme folder as explained in the handbook. If you don't need to know how to add extra JavaScript files then just create that file and you're done! It might be considered a best practice to follow the instructions below rather than relying on the built-in method. Thanks to longwave for pointing this out.

1. Create a file named scripts.js and place it in your theme folder.

2. Edit your theme's [theme-name].info file and add the following on a new line:

   scripts[] = scripts.js

3. Important: Go to Administer > Site building > Themes (admin/build/themes) and re-save the page to refresh the .info file cache.

Drupal 5

1. Create a file named scripts.js and place it in your theme folder.
2. Find the file template.php in your theme folder. If your theme doesn't already have one you need to create one.

3. If you don't have a template.php file then you can paste this code into a new file and you should be finished:

   function _phptemplate_variables($hook, $vars) {
     if ($hook == 'page') {
       drupal_add_js(path_to_theme() .'/scripts.js', 'theme');
       $vars['scripts'] = drupal_get_js();
       return $vars;
     }
     return array();
   }

4. If you do have a template.php file you need to locate the function _phptemplate_variables. If your template.php file does not have that function use this code:

   function _phptemplate_variables($hook, $vars) {
     if ($hook == 'page') {
       drupal_add_js(path_to_theme() .'/scripts.js', 'theme');
       $vars['scripts'] = drupal_get_js();
       return $vars;
     }
     return array();
   }

5. If you have a template.php and you can locate the _phptemplate_variables function you need to edit the function to add the JavaScript file and rebuild the $vars['scripts] variable within the page hook.

   Here is an example from Garland:

   function _phptemplate_variables($hook, $vars) {
     if ($hook == 'page') {
   
       if ($secondary = menu_secondary_local_tasks()) {
         $output = '<span class="clear"></span>';
         $output .= "<ul class=\"tabs secondary\">\n". $secondary ."</ul>\n";
         $vars['tabs2'] = $output;
       }
   
       // Hook into color.module
       if (module_exists('color')) {
         _color_page_alter($vars);
       }
   
       // START
       // Add our scripts.js file.
       drupal_add_js(path_to_theme() .'/scripts.js', 'theme');
       // Rebuild $scripts variable.
       $vars['scripts'] = drupal_get_js();
       // END
   
       return $vars;
     }
     return array();
   }

After following this mini-tutorial you should have a JavaScript file attached to your theme which you can use for adding jQuery goodness to your site.