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!

Remove ‘type’ attribute in Drupal 7 – Say goodbye style, script & link!

Here’s a quick tip to remove the type attribute in Drupal 7 to make your site more HTML5 code compliant. This along with other HTML5 features allows for less code on the front-end… and who doesn’t like less code?!

No longer do you need to include this attribute in your script, style and link tags. As an added bonus, this Drupal hook will also remove CDATA comments. They only existed to satisfy the XHTML validator and it too has gone away with the release of HTML5.

Continue reading “Remove ‘type’ attribute in Drupal 7 – Say goodbye style, script & link!”

Drupal Behaviors: A Quick Introduction & How-to

I’m fairly new to Drupal myself and came across something called Drupal Behaviors when I was working over at BioWare Austin. A fellow Drupal developer whom was part of the team, Ivan Fuyivara, gave a presentation on what they were and how to use them. Being a complete greenhorn at Drupal then, I was a little foggy on the concept and didn’t really understand. Now with a year of Drupal dev under my belt, a better understanding on how to do things the ‘Drupal way’, and an opportunity to work on a re-theme project at Stratfor Global Intelligence, I had the opportunity to put this feature into practice.

Here’s a quick introduction on what Drupal Behaviors are and how to use them. Feel free to critique or tell me I’m completely wrong here… in no way am I claiming to be a Drupal expert. You can also read more (though not too much info) on Drupal.org.

Continue reading “Drupal Behaviors: A Quick Introduction & How-to”

WordPress or Drupal: Compare to learn what’s best for your site!

I recently received a message from a local Austin computer technician, Sergio Garcia. His question is a common one among business owners looking for a quick and easy solution to setup and mange their new sites, which is better, WordPress or Drupal.

Hey I just have a quick question, I fix computers in the South Austin area for a living and it has been time for me to have a website. Nothing too complicated but a good-looking simple and effective page where guests can find my business phone number, map where they can find me, maybe with a slider in the first page with pictures of my work and the office, blog and all that.

I don’t know much but I hear Drupal and WordPress are good options but I do not know which one is better.

Thanks,
Sergio

Do a quick Google search for WordPress or Drupal and you’ll find article after article proclaiming one over another. It’s a never-ending debate that’s been taking place for decades. Years ago, there may have been a right and wrong answer to that question, but with time comes technology and technology is what builds advanced CMS. Since the release of WordPress 3.0 on June 17, 2010 and Drupal 7 on January 5, 2011, the line between which is better has become fuzzy. It’s no longer a question which is best, but which is best for each person site’s needs. I might take some flak for this statement, but I challenge my readers to prove me wrong; There’s nothing a WordPress site can do that a Drupal site can’t and nothing a Drupal site can do that a WordPress site can’t.

Continue reading “WordPress or Drupal: Compare to learn what’s best for your site!”

Introduction to Drupal Preprocess & Process Functions

[dropcap type=”v2″]I[/dropcap]n this post, I’m going to give you an introduction to Drupal’s powerful preprocess and process functions. If you’re not already familiar with these functions, I like to think of them as both a front-enders nightmare and best friend. A nightmare only because it’s Drupal and with everything Drupal, has a steep learning curve. A best friend because, it provides the front-ender more control over the output of rendered code allowing for more efficient, clean, and crisp markup. It does need some basic PHP knowledge, but hopefully after reading this post everything will make sense.

Continue reading “Introduction to Drupal Preprocess & Process Functions”