Check your version

This video 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.

Adding JavaScript to a theme

Video loading...

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:08
    In this chapter, we're going to take a look at
  • 0:10
    adding some simple JavaScript to our theme.
  • 0:13
    If we take a look at the design comps provided to us,
  • 0:16
    we notice that there is some JavaScript included with it.
  • 0:18
    Inside of this js folder, there is a javascript.js file,
  • 0:22
    the jQuery library and this autofill jQuery plugin.
  • 0:26
    And if I open the index.html file,
  • 0:29
    we can see what that's doing on the page.
  • 0:31
    Up here, in our search box, the javascript.js,
  • 0:35
    in conjunction with the autofill plugin,

Add JavaScript to a Theme


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:

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: