Theming Drupal 7 Overview of theme files Writing theme .info files Default .info values Assigning content to regions Checking to see if a region is occupied Theme settings Global Settings Integrating color module Creating a sub-theme Clearing the theme cache Sub Theme - Inheritance Summary Example: Creating a Garland Subtheme That Utilizes the Color Module Working with CSS Working with JavaScript and jQuery Using Newer Versions of jQuery Core templates Template (theme hook) suggestions Theming blocks Advanced theming Overriding themable output Creating accessible themes Theming HowTos Tools and best practices Upgrading 6.x themes to 7.x Working with JavaScript and jQuery Last updated on 26 June 2017 Using JavaScript adds dynamic presentation effects to a theme. In addition to custom JavaScript files many Drupal developers find jQuery useful. jQuery is a lightweight JavaScript library which is built into Drupal. jQuery contains all the common DOM, event, effects, and Ajax functions. Drupal 7 includes jQuery 1.4.4 and jQuery UI 1.8.7. Drupal 6.0 to 6.2 included jQuery 1.2.3 while Drupal 6.3 includes an update to jQuery 1.2.6. For use in module development which requires a later version of jQuery, apply the jQuery update module. When JavaScript is added to a page through Drupal, jQuery is automatically added to the page. For Drupal 8 see JavaScript API in Drupal 8 More comprehensive information on the JavaScript APIs and the use of JavaScript in Drupal can be found in the Developer Guide. For more information about jQuery visit the jQuery API and Documentation site. Drupalize.Me offers a free, 11-minute video introduction to using jQuery in Drupal 6&7... Intro to jQuery in Drupal Adding JavaScript There are two ways for Themes to easily add JavaScript to a page. In .info File JavaScript files can be added to a theme's .info file using the scripts tag. For example, to add the script foo.js to every page on a Drupal site add the following to the theme's .info file. scripts[] = foo.js Clear the theme cache for this change to take effect Scripts added in a theme's .info file is added at the theme level of ordering and will come after core/library JavaScript and module JavaScript. This ordering is important because it allows the theme JavaScript an opportunity to act on the page after the JavaScript providing the functionality within the page. In Drupal 6 there is a default script file, named script.js that can be added to a theme without specifying it in the .info file. If that script is included in the theme it will be automatically added to all pages. In Drupal 7 all script files need to be specified. In template.php Alternatively, scripts can be added in the template.php file using drupal_add_js() or, in Drupal 7, drupal_add_library(). For example, adding a script in the root directory of a theme named foo.js would go like: In Drupal 6: function example_preprocess_page(&$variables) { drupal_add_js(drupal_get_path('theme', 'example'). '/foo.js', 'theme'); // We need to rebuild the scripts variable with the new script included. $variables['scripts'] = drupal_get_js(); } In Drupal 7: function example_preprocess_html(&$variables) { $options = array( 'group' => JS_THEME, ); drupal_add_js(drupal_get_path('theme', 'example'). '/foo.js', $options); } Note, in Drupal 7 the $scripts variable does not need to be rebuilt. $scripts is built in template_process_html which happens after this function. Drupal 7 includes library management. Libraries are collections of JavaScript, CSS, and dependent libraries. For example, Drupal 7 includes jQuery UI. jQuery UI is a component library with internal dependencies. When ui.autocomplete is included it needs ui.core and ui.position to be included as well. Drupal libraries takes care of this for us. Adding ui.autocomplete with all of its CSS, JS, and dependencies can be accomplished with the following code: drupal_add_library('system', 'ui.autocomplete'); This one command includes jquery.ui.autocomplete.js, jquery.ui.autocomplete.css, and the dependencies of jquery.ui.position.js, jquery.ui.widget.js, jquery.ui.core.js, jquery.ui.core.css, and jquery.ui.theme.css. For more information on drupal_add_library see the API documentation. JavaScript closures It's best practice to wrap your code in a closure. A closure is nothing more than a function that helps limit the scope of variables so you don't accidentally overwrite global variables. // Define a new function. (function () { // Variables defined in here will not affect the global scope. var window = "Whoops, at least I only broke my code."; console.log(window); // The extra set of parenthesis here says run the function we just defined. }()); // Our wacky code inside the closure doesn't affect everyone else. console.log(window); A closure can have one other benefit, if we pass jQuery in as a parameter we can map it to the $ shortcut allowing us to use use $() without worrying if jQuery.noConflict() has been called. // We define a function that takes one parameter named $. (function ($) { // Use jQuery with the shortcut: console.log($.browser); // Here we immediately call the function with jQuery as the parameter. }(jQuery)); Note that there are two acceptable syntaxes for closures: the parenthesis that closes the first parenthesis can come either before or after the (jQuery). The .ready() function also has the ability to alias the jQuery object: jQuery(document).ready(function($) { // Code that uses jQuery's $ can follow here. }); In Drupal 7 jQuery.noConflict() is called to make it easier to use other JS libraries, so you'll either have to type out jQuery() or have the closure rename it for you. More examples can be found on jQuery's api site. JavaScript behaviors / JavaScript on AJAX forms Drupal uses a "behaviors" system to provide a single mechanism for attaching JavaScript functionality to elements on a page. The benefit of having a single place for the behaviors is that they can be applied consistently when the page is first loaded and then when new content is added during AHAH/AJAX requests. In Drupal 7 behaviors have two functions, one called when content is added to the page and the other called when it is removed. Behaviors are registered by setting them as properties of Drupal.behaviors. Drupal will call each and pass in a DOM element as the first parameter (in Drupal 7 a settings object will be passed as the second parameter). For the sake of efficiency the behavior function should do two things: