Theming

Add JavaScript to a Theme for Drupal 7

Last updated March 3, 2020
Theming

Check your version

This tutorial covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

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;

Introduction to jQuery Series