We're a Web Design and Drupal Development company based in Middlesbrough, UK. We specialise in easy to use Content Management Systems and E-Commerce websites.

Adding a JavaScript File to a Drupal Theme

23Jan2009
Picture for psynaptic

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
  1. 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();
}
  1. 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();
}

  1. 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.

D5, D6, Drupal, JavaScript, Planet Drupal, Theming
Posted by psynaptic

Comments

Actually

Picture for EclipseGc

you don't need to do most of this. If you just create a script.js in your theme's directory, D6 will automatically add it.

http://drupal.org/node/171213

Posted by EclipseGc
2 years 50 weeks ago

@EclipseGc: you are right,

Picture for Drupal Theme Garden

@EclipseGc: you are right, but this solution is more flexible.
You could add more than one java script in your theme.

Posted by Drupal Theme Garden
2 years 50 weeks ago

Yes

Picture for psynaptic

@EclipseGc: It does actually say that in the post!

Posted by psynaptic
2 years 50 weeks ago

You're a star thanks a

Picture for Chris

You're a star thanks a lot.
Wasted couple hours trying to make it working and thanks to your mini "how to" done this in 1 minute.
Many Thanks.

Posted by Chris
2 years 21 weeks ago

Nice simple post

Picture for Anonymous

Nice elementary explanation and example(s) for 5 & 6. Good starting point for global use of javascript.

Posted by Anonymous
2 years 19 weeks ago

How can i add js for a single page?

Picture for Siegfried Dünkel

This is very helpfull for the start. But what if i want to load a .js-file just for a special page? I ask this, because i try to load a .js file just for a special views-block in Drupal 6.

What i did was creating a views-view--viewname.tpl.php, which is working. Now i added a code like this:

drupal_add_js(drupal_get_path('theme', 'camp') .'/frontpage.js', 'theme');

But it doesent work. Should the drupal_add_js be putted to the template.php? And if so, how do i tell it when it has to be loaded ?

Posted by Siegfried Dünkel
2 years 17 weeks ago

Ive been trying to get this

Picture for Johnny Blaze

Ive been trying to get this done for so long on my site. Thank you for your help, it finally resolved the issue for me. Ive been loading up my pages with javascript, and now I can finally have a nice neat separate file. You are the best.

Johnny Blaze
Web Developer

Posted by Johnny Blaze
2 years 16 weeks ago

Add comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <drupal5>, <drupal6>, <html>, <js>, <php>. The supported tag styles are: <foo>, [foo]. PHP source code can also be enclosed in <?php ... ?> or <% ... %>.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.

Blog Navigation

Recent Clients

Drupal Developer Reference

Screenshot of DrupalContrib API

DrupalContrib API was created by Freestyle Systems for Drupal developers who need access to reference documentation for Drupal's most popular contributed modules.

If you're a Drupal developer you'll no doubt find our resource invaluable!

Drupal Association

Drupal Association Organization member