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.

Alternate resources: 

Adding JavaScript through a theme

Video loading...

Transcript language code: 

Join Drupalize.Me to watch this video

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

Log in Sign up
  • 0:15
    The most common way of adding
  • 0:16
    JavaScript to Drupal for a front-end developer is through the theme.
  • 0:20
    The theme is often the most accessible place
  • 0:23
    for adding JavaScript and adding additional functionality
  • 0:25
    to your site, often because JavaScript adds display only
  • 0:30
    functionality, stuff that enhances the usability of the page
  • 0:33
    but isn't actually part of the functionality of the site.
  • 0:36
    So something like Fivestar, for example,
  • 0:39
    might be functional and be provided by a module, versus something
  • 0:42
    like some enhancements to your theme, or collapsible blocks,

Adding Javascript Through a Theme


This lesson shows the steps and code to add on the Drupal side in order to load JavaScript scripts to you site. One thing to note is that the HTML5 placeholder attribute makes this plugin invalid markup.

There is a minor change between Drupal 6 and Drupal 7, where you should use function($) to wrap your code. For Drupal 7 you can use:

(function($) {
$(document).ready(function() {
$('#search input.form-text').autofill({
value: Drupal.t('Search...'),

Additional resources:
There are no resources for this video. If you believe there should be, please contact us.