Theming

Add JavaScript to a Theme for Drupal 7

Last updated
Theming

This page is archived

We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.

Alternate resources

Guide: Hands-On Theming
Guide: Theme Drupal Sites

Walks through the process of first adding the search block to the node template file, and then explains some of the best practices for incorporating JavaScript scripts within your theme. Walks through how to protect the dollar-sign variable, and how to use the Drupal behaviors instead of the document ready so that your JavaScript will fire not only on page loads, but also if there is any dynamic material being loaded on the page through asynchronous page loads. We'll show you how to select the jQuery selector to target the desired element, and how to conform to Drupal's best-practice coding standards when it comes to integrating JavaScript and jQuery into your theme. You can learn more about jQuery itself with the Introduction to jQuery Series.

To use Query in no conflict mode, because was not defined.
Add this line on the top: jQuery.noConflict(); more info here: http://api.jquery.com/jQuery.noConflict/

To improve how the search box looks, you need to modify the following:
currently : search-theme-form
modify to: search-block-form
and then in the property in line 321 to look like this:


/* Header quick search */
#header form#search-block-form {
    top: -165px;

Additional resources

Introduction to jQuery Series