4. Adding JavaScript to your theme or module

Last updated January 26, 2012. Created by Keyz on September 5, 2008.
Edited by silverwing, pooya1366, WorldFallz, gagarine. Log in to edit this page.

The PHP 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 will be explained in more detail in a later 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. Here is how you would ensure the file gets added:

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

Adding JavaScript from within a theme

With drupal_add_js

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:

Using the theme's .info file (Drupal 6)

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

Using a preprocess_page function

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