How to add Javascript to a page in Drupal?

In Drupal javascript can be added to a page in two ways. First one is to include it in the file which is the pretty simple and well known way. The other way is to use drupal drupal_add_js function. I will explain each of them.

In .inf

o File

In the file, a javascript file can be added using the scripts tag. Lets look at the example.

   scripts[] = js/codeinsects.js

In Drupal 6, a script file named script.js is included in the theme without specifying in the info file. But in Drupal 7 all script files needs to be specified.

In template.php

Scripts also can be added by drupal function drupal_add_js. This function adds a JavaScript file, setting, or inline code to the page.

In Drupal 6 the parameters of this function are as follows:

     drupal_add_js($data = NULL, $type = 'module', $scope = 'header', $defer = FALSE, $cache = TRUE, $preprocess = TRUE)


  • $data (optional) : If given, the value depends on the $type parameter:
    • core, module or theme : Path to the file relative to base_path().
    • inline : The JavaScript code that should be placed in the given scope.
    • setting : An array with configuration options as associative array.
  • $type (optional) : The type of JavaScript that should be added to the page. Allowed values are ‘core’, ‘module’, ‘theme’, ‘inline’ and ‘setting’. You can, however, specify any value. It is treated as a reference to a JavaScript file. Defaults to ‘module’.
  • $scope (optional) : The location in which you want to place the script. Possible values are ‘header’ and ‘footer’ by default. If your theme implements different locations, however, you can also use these.
  • $defer (optional) : If set to TRUE, the defer attribute is set on the tag. Defaults to FALSE. This parameter is not used with $type == ‘setting’.
  • $cache (optional) : If set to FALSE, the JavaScript file is loaded anew on every page call, that means, it is not cached. Defaults to TRUE. Used only when $type references a JavaScript file.
  • $preprocess (optional) : Should this JS file be aggregated if this feature has been turned on under the performance section?

Look at the usage of drupal_add_js function in Drupal 6:

function example_preprocess_page(&$variables) {
   drupal_add_js(drupal_get_path('theme', 'codeinsect'). 'js/codeinsects.js', 'theme');
  // We need to rebuild the scripts variable with the new script included.
   $variables['scripts'] = drupal_get_js();

In Drupal 7 there is a little change in the function, instead of long parameters, it takes $options as an array or string.

  • $options (optional) : A string defining the type of JavaScript that is being added in the $data parameter (‘file’/’setting’/’inline’/’external’), or an associative array. JavaScript settings should always pass the string ‘setting’ only.
  • type
  • scope
  • group
  • weight
  • defer
  • cache
  • preprocess

I am not going to discuss about the options which are present in drupal 6 version of druapl_add_js. They are just the same. Three new options first one is :

  • group: A number identifying the group in which to add the JavaScript. Available constants are: JS_LIBRARY: Any libraries, settings, or jQuery plugins.

    JS_DEFAULT: Any module-layer JavaScript.

    JS_THEME: Any theme-layer JavaScript.

    The group number serves as a weight: JavaScript within a lower weight group is presented on the page before JavaScript within a higher weight group.

  • weight : A number defining the order in which the JavaScript is added to the page relative to other JavaScript with the same ‘scope’, ‘group’, and ‘every_page’ value.

The exact ordering of the javscript files is as follows:

  • First by scope, with ‘header’ first, ‘footer’ last, and any other scopes provided by a custom theme coming in between, as determined by the theme.
  • Then by group.
  • Then by weight.
  • Then by the order in which the JavaScript was added.

  1. Rex
  2. Nike
  3. Buckalew
  4. Danice
  5. Gatewood
  6. Mosquito Repellents
  7. immobilier
  8. Louis Vuitton 25 Speedy Damier

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.

Skip to toolbar