Load JS & CSS Files on Specific Pages in Drupal 7

Loading a CSS or JS file for a particular page in Drupal is a cinch with hooks. Here’s a few of the ways you can load JS & CSS on specific pages. Before you get started, I’d suggest taking a look at Drupal’s drupal_add_js and drupal_add_css. Regardless how you go about doing it, you’ll need to be somewhat familiar with these functions.

Loading a CSS or JS file for a particular page in Drupal is a cinch with hooks. Here’s a few of the ways you can load JS & CSS on specific pages. Before you get started, I’d suggest taking a look at Drupal’s drupal_add_js and drupal_add_css. Regardless how you go about doing it, you’ll need to be somewhat familiar with these functions.


Using a Module

Here’s one of the simplest methods I found to load certain JS and CSS files on specific pages. It uses a custom module and Drupal’s request_uri to define when scripts should get loaded.

function modulename_init() {
  if (request_url() == 'your-url-path') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
}

Using a Template Preprocess

You can also use Drupal’s preprocess functions to add JS and CSS to specific pages:

In your template.php:

template_preprocess_node

function yourtheme_preprocess_node(&$vars) {
  // Add JS & CSS by node type
  if( $vars['type'] == 'your-node-type') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
  
  // Add JS & CSS to the front page
  if ($vars['is_front']) {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
  
  // Add JS & CSS by node ID
  if (drupal_get_path_alias("node/{$vars['#node']->nid}") == 'your-node-id') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
}

template_preprocess_page

function yourtheme_preprocess_page(&$vars) {
  // Add JS & CSS by node type
  if (isset($vars['node']) && $vars['node']->type == 'your-node-type') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
}

template_preprocess_views_view

function template_preprocess_views_view(&$vars) {
  // Get the current view info
  $view = $vars['view'];

  // Add JS/CSS based on view name
  if ($view->name == 'view_name') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }

  // Add JS/CSS based on current view display
  if ($view->current_display == 'current_display_name') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
}

Not comfortable diving into code?

Here’s a couple of Drupal projects that allow you to inject CSS and JS into your pages:

And of course, you can use a combination of the above to add your JS and CSS files to a page. If you do it a different way or know a better Drupal way, please comment below and let me know!

Author: Ben Marshall

Red Bull Addict, Self-Proclaimed Grill Master, Entrepreneur, Workaholic, Front End Engineer, SEO/SM Strategist, Web Developer, Blogger

6 thoughts on “Load JS & CSS Files on Specific Pages in Drupal 7”

      1. Thanks! I’ve done it with view preprocess:

        function MYTHEME_preprocess_views_view(&$vars) {
        $view = &$vars['view'];
        if ($view->name == 'MYVIEW') {
        drupal_add_css(drupal_get_path('theme', 'MYTHEME') .'/css/MYCSSFILE.css');
        }
        }

        Of course, css path could differ significantly.

  1. Hi, I’m new to Drupal.

    I’m trying to make my JS work on my about page. My about page is using a panel of layout (1 column). I ‘d like to add a slide effect on the images and paragraphs in this panel on page load.

    – I’ve created a custom theme for my Drupal site, the directory is:
    wamp/www/thelady/sites/all/themes/custom/thelady2015

    – My custom.js file is in a js folder thelady2015/js/custom.js

    Here is the code in the template.php file:
    function thelady2015_preprocess_node(&$vars) {

    // Add JS & CSS by node type
    if( $vars[‘type’] == ‘panel’) {
    drupal_add_js(drupal_get_path(‘theme’,’thelady2015′) . ‘/custom.js’);
    }

    }

    and here is the code in my js file (for now I just want to test, so it only has an alert message):
    (function($){

    Drupal.behaviors.runfunctions = {
    attach: function (context){
    alert(‘hello world’);
    };

    })(jQuery);

    What am I doing wrong?

Leave a Reply

Your email address will not be published. Required fields are marked *