Drupal - How do I add JavaScript to a site?

The Managing JavaScript in Drupal 7 guide provides the information to add JavaScript to Drupal. The techniques presented there apply to both themes and (custom) modules:

  • Add a scripts[] = somescript.js to your module or theme's .info file
  • Use drupal_add_js() in your module or theme's code
  • Use the #attached['js'] property in a Form API or renderable array.

Note that Drupal already include jQuery, jQuery UI and a bunch of other libraries so you don't, and shouldn't, add them yourself. Instead you should use drupal_add_library() or the #attached['library'] property.

The Working with CSS guide provides the information to add CSS to Drupal. Again, the techniques presented there apply to both themes and (custom) modules. With an exception: addition of style sheets from an .info files only works for a theme and not a module.

  • Add stylesheets[all][] = somestylesheet.css to a theme's .info file.
  • Use drupal_add_css() from module or theme's code.
  • Use #attached[css] property in a From API or renderable array.

You can place your js file in your theme folder and add this js file to drupal by using drupal_add_js() in template.php preprocess functions.