Drupal Best Theming Practice for where to put JavaScript (jQuery Mini-series Part 2 of 3)

In D6, you can put a .js file in your base theme directory and it will automatically be loaded by Drupal.

You can also include a js file via an entry in your theme’s .info file:

scripts[] = your_javascript.js

However, I recommend the following:

Consider your JavaScript theme-able like HTML.

1. It should be able to be themed
2. Put JavaScript in .js file
3. Use drupal_add_js() in a theme function
4. If in a module, call it with hook_init()

As HTML in a theme function / tpl file, calling your JS with a theme function allows theme developers to modify or override your JS in the theme layer.

Here it is in a module:

<?php

/**

 * Implementation of hook_init()

 */

function trickoutmysite_init() {

 theme('trickoutmysite_javascript');

}

/**

 * Implementation of hook_theme()

 */

function trickoutmysite_theme($existing, $type, $theme, $path) {

  return array(

    'trickoutmysite_javascript' => array(

      'arguments' => array(),

    ),

  );

}

/**

 * A themable function which uses drupal_add_js to include the js file

 */

function theme_trickoutmysite_javascript() {

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

}

?>

And here is the start of your JavaScript file, which will run your js after your web page (document), has loaded.

// $Id$

// Global killswitch

if (Drupal.jsEnabled) {

  $(document).ready(function () {

    // Put your javascript in here

  });

}

Tips

1. Make sure you check out the drupal_ad_js api for its excellent set of options, such as for controlling caching and placement.
   • see http://api.drupal.org/api/function/drupal_add_js/6
2. Creating a namespace for your theme or module.
   • see http://www.innovatingtomorrow.net/2008/06/02/jquery-and-drupal