Drupal comes with the excellent and very powerful jQuery JavaScript library. jQuery really reduces the learning curve when it comes to adding fancy JavaScript effects to a Drupal site.
In this mini-tutorial I will show you how you can add a theme-based JavaScript file to your site so you can start to leverage the power of jQuery in your projects.
Instructions
Drupal 6
Drupal 6 already looks for a script.js file in the theme folder as explained in the handbook. If you don't need to know how to add extra JavaScript files then just create that file and you're done! It might be considered a best practice to follow the instructions below rather than relying on the built-in method. Thanks to longwave for pointing this out.
- Create a file named scripts.js and place it in your theme folder.
Edit your theme's [theme-name].info file and add the following on a new line:
scripts[] = scripts.jsImportant: Go to Administer > Site building > Themes (admin/build/themes) and re-save the page to refresh the .info file cache.
Drupal 5
- Create a file named scripts.js and place it in your theme folder.
- Find the file template.php in your theme folder. If your theme doesn't already have one you need to create one.
If you don't have a template.php file then you can paste this code into a new file and you should be finished:
function _phptemplate_variables($hook, $vars) {
if ($hook == 'page') {
drupal_add_js(path_to_theme() .'/scripts.js', 'theme');
$vars['scripts'] = drupal_get_js();
return $vars;
}
return array();
}If you do have a template.php file you need to locate the function
_phptemplate_variables. If your template.php file does not have that function use this code:function _phptemplate_variables($hook, $vars) {
if ($hook == 'page') {
drupal_add_js(path_to_theme() .'/scripts.js', 'theme');
$vars['scripts'] = drupal_get_js();
return $vars;
}
return array();
}If you have a template.php and you can locate the
_phptemplate_variablesfunction you need to edit the function to add the JavaScript file and rebuild the$vars['scripts]variable within thepagehook.Here is an example from Garland:
function _phptemplate_variables($hook, $vars) {
if ($hook == 'page') {
if ($secondary = menu_secondary_local_tasks()) {
$output = '<span class="clear"></span>';
$output .= "<ul class=\"tabs secondary\">\n". $secondary ."</ul>\n";
$vars['tabs2'] = $output;
}
// Hook into color.module
if (module_exists('color')) {
_color_page_alter($vars);
}
// START
// Add our scripts.js file.
drupal_add_js(path_to_theme() .'/scripts.js', 'theme');
// Rebuild $scripts variable.
$vars['scripts'] = drupal_get_js();
// END
return $vars;
}
return array();
}
After following this mini-tutorial you should have a JavaScript file attached to your theme which you can use for adding jQuery goodness to your site.














Actually
you don't need to do most of this. If you just create a script.js in your theme's directory, D6 will automatically add it.
http://drupal.org/node/171213
@EclipseGc: you are right,
@EclipseGc: you are right, but this solution is more flexible.
You could add more than one java script in your theme.
Yes
@EclipseGc: It does actually say that in the post!
You're a star thanks a
You're a star thanks a lot.
Wasted couple hours trying to make it working and thanks to your mini "how to" done this in 1 minute.
Many Thanks.
Nice simple post
Nice elementary explanation and example(s) for 5 & 6. Good starting point for global use of javascript.
How can i add js for a single page?
This is very helpfull for the start. But what if i want to load a .js-file just for a special page? I ask this, because i try to load a .js file just for a special views-block in Drupal 6.
What i did was creating a views-view--viewname.tpl.php, which is working. Now i added a code like this:
drupal_add_js(drupal_get_path('theme', 'camp') .'/frontpage.js', 'theme');
?>
But it doesent work. Should the drupal_add_js be putted to the template.php? And if so, how do i tell it when it has to be loaded ?
Ive been trying to get this
Ive been trying to get this done for so long on my site. Thank you for your help, it finally resolved the issue for me. Ive been loading up my pages with javascript, and now I can finally have a nice neat separate file. You are the best.
Johnny Blaze
Web Developer