CSS and Javascript Theming Functions

In the last article, CSS in Drupal 7, I discussed ways of incorporating CSS/Javascript smartly in a Drupal theme.  Specifically, providing alternatives to the standard .info file method, which is really only best for site-wide CSS/javascript. The most common method is probably the second option I spoke to, which is the function drupal_add_css (and drupal_add_js).  These functions are great for adding files in only where you need them and also have a lot of custom parameters available when needed.

As I've put these methods into practice, I thought it would be fitting to follow up on how to actually include these in your theme - more specifically, some common functions to use for adding them.  So, below are the most common ones I've found myself using:

The first is fairly self-explanatory.  (CAPS parts replaced with relevant info for your theme.)

// If Front Page
if (drupal_is_front_page()) {
  drupal_add_css(drupal_get_path('theme', 'YOUR_THEME') .'/css/FRONT_CSS.css');
}

Below will add CSS/JS to the user profile page only.  Also, there is an added parameter which will add them in with the other theme files (as opposed to earlier with core or modules).

// User Profile Page Only
function YOUR_THEME_preprocess_user_profile(&$variables) {
  drupal_add_css(drupal_get_path('theme', 'YOUR_THEME') .'/css/USER_PAGE.css', array('group' => CSS_THEME));
  drupal_add_js(drupal_get_path('theme', 'YOUR_THEME') .'/js/USER_PAGE.js', array('group' => JS_THEME));
}

Below will add files based on node information.  See comments for specifics.

// General Node Preprocess
function YOUR_THEME_preprocess_node(&$variables) {
  $node = $variables['node'];
  // Add JS File on All Nodes except Pages
  if ($node->type !== 'page') {
    drupal_add_js(drupal_get_path('theme', 'YOUR_THEME') .'/js/NODES_!PAGES.js', array('group' => JS_THEME));
  }
  // Blog Nodes (use machine name of any content type to target)
  if ($node->type == 'blog') {
    drupal_add_css(drupal_get_path('theme', 'YOUR_THEME') .'/css/BLOG_NODES.css', array('group' => CSS_THEME));
  }
  // Specific Node by ID - also includes parameter for weighting the file lower
  if ($node->nid == '10') {
    drupal_add_js(drupal_get_path('theme', 'YOUR_THEME') .'/js/NODE_ID_10.js', array('group' => JS_THEME, 'weight' => 50));
  }

}

Below will add files based on presence of certain Views.  Not sure if this is the best method for this - would be interested to get feedback.

// Views Pre-Render Function
function YOUR_THEME_views_pre_render(&$view) {
    if($view->name == 'VIEW_MACHINE_NAME') {
      if ($view->current_display == 'block_1') {
        drupal_add_js(drupal_get_path('theme', 'YOUR_THEME') .'/js/SPECIFIC_VIEW.js');
      }
    }
}

Finally, this will add files based on the presence of a certain form.

// Adding based on presence of forms
function YOUR_THEME_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'FORM_ID') {
    drupal_add_css(drupal_get_path('theme', 'YOUR_THEME') .'/css/FORM_CSS.css');
  }
}

Feel free to comment and add your own as I'm sure I'll be adding to this list for myself over time.