Correct Way in Adding JS/CSS to a Block in Drupal 7

Written by Chris Roane

In Drupal, drupal_add_js() and drupal_add_css() are great functions for adding JS/CSS to the module or theme layer. However, if you do this inside of the ‘#markup’ call in Drupal 7, you are doing it wrong.

This becomes obvious when you turn block caching or anonymous page caching on, because the JS/CSS won’t be included on the page. Here is the code in how to do it correctly.

/**
 * Implements hook_block_info().
 */
function mymodule_block_info() {
  $blocks['testblock'] = array(
    'info' => t('Testing Block'),
  );

  return $blocks;
}

/**
 * Implements hook_block_view().
 */
function mymodule_block_view($delta = '') {
  $block = array();

  switch ($delta) {
    case 'testblock':
      $block['subject'] = t('Testing block');
      $block['content'] = array(
        '#markup' => mymodule_testblock_content(),
        '#attached' => array(
          'css' => array(
            drupal_get_path('module', 'mymodule') . '/css/mymodule.css',
          ),
          'js' => array(
            drupal_get_path('module', 'mymodule') . '/js/mymodule.js',
          ),
        ),
      );
      break;
  }
  return $block;
}

function mymodule_testblock_content() {
  return '<p>This is a testing block!</p>';
}

This code will ultimately call drupal_add_js() and drupal_add_css(), but it is hit even with block caching on. It makes sense when you think about it, because block caching grabs the html generated in ‘#markup’ once, and doesn’t call it again when it is cached.

Here is a great article that goes through another example in how to do this.

Did you like this article?

Enter your email address below to get notified when the site is updated. Or you can always subscribe to the RSS Feed.

Please help us spread the word about this site by tweeting, digging and sharing this article around the web (see the buttons immediately above).

Monday, November 19th, 2012