API / CSS / Dev / Drupal / JavaScript

Adding CSS and Javascript to Specific Pages – the Drupal 7 Way

Have you ever wondered how you can avoid loading that HUGE chunk of CSS or that giant Javascript file you have to every page? There’s a simple way to do it in drupal using a preprocess function in your template.php file.

THEMING THURSDAYS are here again! Welcome to this week’s edition. My apologies for missing the last two weeks.

Theming Thursdays: Adding CSS and JS

Theming Thursdays: Adding CSS and JS

Before you begin make sure to download and enable the Devel module. It’s a very handy module for theming and a lot of other things. For this exercise we will use it to find out some details about the page.

For this example we will assume your theme name is “mytheme” and we want to add the css file /sites/all/themes/mytheme/css/news.css when you are viewing a news content type

In your theme folder, /sites/all/themes/mytheme, find the template.php file.

We will then use template_preprocess_page – which is basically a function that prepares everything the page needs before it renders. That’s why it’s named PREprocess.

Add the following function:

/**
 * Implements template_preprocess_page
 */
function mytheme_preprocess_page(&$variables, $hook) {
  dsm($variables['node']);
}

Please also add the comments prior to the function. You might as well get used to the coding standards and practices in Drupal.

This function basically uses the hook and uses the dsm() (drupal set message) function to output the information about the node about to be rendered.

Clear all caches first since we added a new function. Then go to your news node.

You should see something similar to this. Click once on stdClass. Then click twice on type to see how to access that variable.

Take note of the type value.

Take note of the type value.

So based on that we should change our function to:

/**
 * Implements template_preprocess_page
 */
function mytheme_preprocess_page(&$variables, $hook) {
  dsm($variables['node']->type);
}

This should now output the node type. Try it out on other nodes with different types. You should be able to get the machine name of the content type of the node you are currently viewing.

So now that we know how to determine if the node is of type news, we add our logic:

/**
 * Implements template_preprocess_page
 */
function mytheme_preprocess_page(&$variables, $hook) {
  dsm($variables['node']->type);
  if($variables['node']->type == 'news') {
    drupal_add_css(drupal_get_path('theme', 'mytheme') . '/css/news.css');
  }
}

Ok, so let’s analyze that.

if($variables['node']->type == 'news') {

The code block inside the IF statement executes if the machine name of the node type  is news.

drupal_get_path('theme', 'mytheme')

The chunk above gets the drupal path to your theme ‘mytheme’.

drupal_add_css(drupal_get_path('theme', 'mytheme') . '/css/news.css');

This line above adds the css.

So try it out if it works. Then remove the dsm if everything works fine.

/**
 * Implements template_preprocess_page
 */
function mytheme_preprocess_page(&$variables, $hook) {
  if($variables['node']->type == 'news') {
    drupal_add_css(drupal_get_path('theme', 'mytheme') . '/css/news.css');
  }
}

You can insert Javascript the same way but this time using drupal_add_js:

/**
 * Implements template_preprocess_page
 */
function mytheme_preprocess_page(&$variables, $hook) {
  if($variables['node']->type == 'news') {
    drupal_add_css(drupal_get_path('theme', 'mytheme') . '/css/news.css');
    drupal_add_js(drupal_get_path('theme', 'mytheme') . '/js/news.js');
  }
}

Simple, eh?

There are a LOT more hooks to learn for theming drupal. So stay tuned.

References:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s