How do I add JavaScript to my Drupal theme?

The Drupal front-end doesn't automatically load JavaScript and therefore jQuery either. This is a good thing as for some sites JavaScript isn't needed. I hear you say JavaScript isn't needed?! And you might be right, a bit is nice. I guess more to the point, as useful as jQuery is, it might not be necessary to add some basic interaction to your site so having to explicitly add JavaScript is good.

Drupal is packaged with the most recent jQuery v3.6.0 package which weighs in at 30kB.

Should I use jQuery of only vanilla JavaScript?

Make the choice. The first thing you need to decide is do you want to use jQuery or just use vanilla JavaScript. There are lots of reasons why and why not to use one option over another. I am not going to go into detail here but things you need to consider are:

1. Is the JavaScript you are using supported across all browsers
2. Is the size of adding the jQuery library necessary.

Both these reasons are somewhat reason for and against each other, so make your choice and then let's see how we can add JavaScript to our theme.

Add JavaScript to a custom Drupal theme

Okay, so you have decided to use vanilla JavaScript (the jQuery option is at the end). Let's see how we can add it to our theme. Follow the steps below:

1. Add the file reference to the libraries YAML.

   global-styling:
             version: VERSION
             css:
               theme:
                 css/main.css: {}
                 css/typography.css: {}
                 css/style.css: {}
                 css/fontello.css: {}
                 css/views.css: {}
             js:
               js/nav.js: {}

   
   To learn more about the libraries YAML check out part 1 where we first used it to add our own CSS.
    

2. Create your JavaScript file and add it to the directory, in this case, it is in the JS directory in our theme directory, as it was referenced above.

   Image

   

3. In the JavaScript file, add this function with the console.log.

   (function () {
             console.log('Testing Drupal JavaScript With no Dependencies');
           })();

If you are going to use modern ES6 JavaScript code you will need to transpile ES6 to ES5 to support some browsers. To find out more about this please check Drupal.org and Tools for front-end developement.

That's it, now you will get a console.log when the theme loads and on every page.

Let's now add a simple sticky header that changes the background colour when you scroll

Add this code to your JavaScript file in place of the console.log in the above function.

function () {
        
  // Simple onScroll
  let scrollElement = document.documentElement;
  const header = document.getElementById('header');
  window.onscroll = function () {
    myFunction();
  };
       
  function myFunction() {
    if (scrollElement.scrollTop > 128) {
      header.style.backgroundColor = "hsla(180,100%,100%,0.95)";
    } else {
      header.style.backgroundColor = "transparent";
    }
  }
})();

For this to work you will need to have the same elements with the same header ID but that is it. If you want to learn more about how this is set up in a basic HTML page you can check out my article on what is scrollTop.

Thanks for reading and be sure to sign up for the newsletter to get the latest as soon as it goes live. I write about front-end development and design and will also be doing the odd give-away. 'til next time, take care and seize the day!