Warning message

Documentation is currently being migrated into the new system. Some pages might be temporarily missing, and some guides might appear empty. Thank you for your patience while we are improving Drupal.org documentation.

Adding JavaScript to your theme or module

Last updated on
October 15, 2016 - 21:36

This documentation is deprecated. Recommend a change or new documentation.

The Drupal API function drupal_add_js() lets you add a JavaScript file, setting or inline code to the page and it takes 5 parameters (see the api reference).

The first parameter is always going to be a path to a js file, an array, or a piece of JavaScript code. If the second parameter is 'module' (the default), 'theme', or 'core', then the first parameter must be a path and the only difference between these three is the order in which the script tag will be placed relative to other scripts, i.e. core scripts first, then module scripts and finally theme scripts.

If the second parameter is 'setting', then the first parameter must be an array of settings. This is very handy for telling JavaScript about the configuration settings for your module, for example, and is explained in more detail in the next section.

The final possibility for the second parameter is "inline" and this means you are passing in straight JavaScript code as your first parameter, which you want written directly to your page between script tags, rather than a call to a file.

These two are the most important parameters for this function - indeed you may never even use the second one if all you ever want to do is add a js file for your module - but you can learn about the other parameters by reading this function's documentation at api.drupal.org.

Adding JavaScript from within a module

So, let's say you have written some jQuery code that targets some of the elements that are output by your module or theme. You simply need to save your jQuery code as a JavaScript file (i.e. with the .js extension) and place it in your module or theme's directory. If it's for a module, you then need to make the call to drupal_add_js() as above, from wherever the module is about to output content (e.g. in hook_block or hook_nodeapi), or if the JS is not acting on content output by your own module you can call it from hook_menu or hook_init. Note, that putting this file into hook_init means it will run on every page request, whether needed or not. Here is how you would ensure the file gets added:

drupal_add_js(drupal_get_path('module', 'mymodule') . '/mymodule.js');

The jquery.js file is included automatically so you don't need to worry about adding it.

To add JS (or CSS) file from form builder function the recommended way is to use Form API #attached property as below,

$form['#attached']['js'] = array(
  drupal_get_path('module', 'ajax_example') . '/ajax_example.js',

See Form API reference for more details.

Adding JavaScript from within a theme

With drupal_add_js

(drupal_add_js is deprecated in Drupal 8; use '#attached' instead.) If you are adding your .js file from within a theme, then you simply need to make the call from within template.php, you need to add the second parameter this time as 'theme' so that Drupal knows this script should be loaded after all core and module scripts are loaded:

drupal_add_js(drupal_get_path('theme', 'mytheme') . '/mytheme.js', array(
  'type' => 'file',
  'group' => JS_THEME,

Using the theme's .info file

You can add your script path in the .info file of your theme and Drupal will include them automatically.

name = My theme
description = Theme developed by me.
core = 7.x
engine = phptemplate

scripts[] = mytheme.js

Using a preprocess_page function

To conditionally add js to the theme, you can use a preprocess_page function:

function mytheme_preprocess_page(&$vars, $hook) {
  if (true) {
    drupal_add_js(drupal_get_path('theme', 'mytheme') . '/mytheme.js');
    $vars['scripts'] = drupal_get_js(); // necessary in D7?