Load JS & CSS Conditionally in Drupal 7

Drupal 7 is a haus at combining CSS & JS files. This can help boost page performance & optimization easily, but if not used right, can do the complete opposite. In this post, we’ll go over how to load JS & CSS files based on conditionals like URL, module, node, views and more.

Before we dive in, get somewhat familiar with the drupal_add_js and drupal_add_css functions. We’ll use these to load the actual JS and CSS files.

hook_init – runs on every page

/**
 * Implements hook_init()
 *
 * @link https://api.drupal.org/api/drupal/modules%21system%21system.api.php/function/hook_init/7.x
 */
function HOOK_init() {
  // Using the equivalent of Apache’s $_SERVER[‘REQUEST_URI’] variable to load based on URL
  // @link https://api.drupal.org/api/drupal/includes!bootstrap.inc/function/request_uri/7
  if (request_url() === 'your-url-path') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
}

Using hook_init is one of the simplest methods to load specific JS and CSS files (don’t forget to replace HOOK with the theme or module machine name).

Be careful, this method get’s ran on every page, so it’s best to use this method only when you actually need to check every page for your conditional. A good example, loading module CSS and JS files. A bad example, loading node-specific CSS and JS files. We’ll go over that next.

There’s also a similar preprocess function, template_preprocess_page you could use, but it too get’s ran on every page and is essentially the same as hook_init.

template_preprocess_node – runs on node pages

/**
 * Implements template_preprocess_node()
 *
 * @link https://api.drupal.org/api/drupal/modules%21node%21node.module/function/template_preprocess_node/7.x
 */
function TEMPLATE_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 */ );
  }
  // Given an internal Drupal path, load based on node alias.
  if ( drupal_get_path_alias( 'node/{$vars[‘#node’]->nid}' ) == 'your-node-id' ) {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
}

Using template_preprocess_node is perfect when loading JS and CSS files based on nodes (don’t forget to replace TEMPLATE with the theme machine name). Since it only get’s run on nodes, it’s great to use when you want to load CSS and JS files on specific node types, front pages, node URLs, etc.

template_preprocess_views_view – runs every view load

/**
 * Implements template_preprocess_views_view()
 *
 * @link https://api.drupal.org/api/views/theme%21theme.inc/function/template_preprocess_views_view/7.x-3.x
 */
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 */ );
  }
}

Using template_preprocess_node is useful when loading JS and CSS files when a particular view is being used (don’t forget to replace TEMPLATE with the theme machine name).

Helpful Methods for Conditionals

Here’s a few helpful Drupal methods you can use for your conditionals. Have one you use often? Let me know in the comments below.

• request_uri – Returns the equivalent of Apache’s $_SERVER[‘REQUEST_URI’] variable.
• drupal_get_path_alias – Given an internal Drupal path, return the alias set by the administrator.

Looking like a foreign language to you?

Not a developer or just lost looking at the code snipplets above? Shoot me a question in the comments below, or give these ‘plug-and-play’ modules a try for a GUI alternative:

• CSS Injector: http://drupal.org/project/css_injector
• JS Injector: http://drupal.org/project/js_injector
• Code per Views Display: https://www.drupal.org/project/cpv
• Context: https://www.drupal.org/project/context