In this following example I will share some code snippets that will attach a custom JavaScript and CSS only to be loaded for a certain page in Drupal 8.

As you know JS is quite heavy on the browser and holds down the main execution thread, so custom loading scripts only on pages that need it is quite important for performance.

Drupal 8 – add JavaScript and CSS to a certain page only

In the example code I will be using jquery-selectall a jquery plugin written by me, that only want to load for my “/about” page.

If you are interested in this jQuery plugin check out jQuery Select Deselect All Checkboxes.

Here is what I want to achieve.

  • Load a custom script custom.js only on a page with the alias “/about”
  • Make sure that the jQuery plugin jquery-selectall loads before my custom-js javascript file on and only on the “/about” page.
  • Also attach a CSS file to this page named jquery-selectall.css

Here is how I will achieve it:

Time needed: 5 minutes

Drupal 8 – Add JavaScript just for a specific page based on page path alias

  1. Create a new section in your MYTHEME.libraries.yml file and add two subsections one for JS and one for CSS

    In your theme libraries file create a new section and call it whatever you want, in our case it will be jquery-selectall.
    Inside this new section create two subsection one for ‘js:’ and one for ‘css:’. Under the css subsection create a new section called ‘theme:’. If your script is also dependent on javascript libraries in drupal 8 core add another section under ‘js:’ called ‘dependencies:`
    It should look like this.

    jquery-selectall:
  js:
    dependencies:
  css:
    theme:

  2. Add the paths of the files you want to load for this page under the sections you just created.

    Make sure the order of the JS files follow the order of dependencies for custom libraries. And add core dependencies under ‘dependencies:’ It should look like this:

    jquery-selectall:
  js:
    vendor/jquery-selectall/jquery-selectall.min.js: {}
    js/jquery-selectall-instance.js: {}
  dependencies:
    - core/jquery
  css:
    theme:
      css/jquery-selectall.css: {}

  3. Implement ‘hook_page_attachements_alter’ in your themes .theme file where you attach the library you just created above based on the path alias.

    Here is an example code. The path alias I used is ‘about’ and be sure replace the all caps word MYTHEME with the actual low caps machine name of your theme.

    /**
 * Implementes hook_page_attachments_alter().
 */
function MYTHEME_page_attachments_alter(&$page){

  // Get the current path
  $path = \Drupal::service('path.current')->getPath();

  // Check if its a node page and can actually have an alias
  if (strpos($path, '/node/') === 0) {

    // Get the actual alias of the current page
    $alias = \Drupal::service('path.alias_manager')->getAliasByPath($path);

    // Check if the alias is the one you want
    if ($alias == '/about') {

      // Attach the library you just created before in yout .theme file
      $page['#attached']['library'][] = 'MYTHEME/jquery-selectall';
    }

  }
}

That’s it. Your Javascript and CSS should now only load for the pages you want. If you want to know more about how to handle javasciprt dpendencies in drupal 8 https://www.drupal.org/docs/8/api/javascript-api/javascript-api-overview

Please let me know if this was helpful for you by leaving a comment below.

Thanks, Lehel