The Definitive Guide to Drupal 7

Start With a Good Base

A great way to ensure minimal template overrides is to define your markup in such a way that it is flexible enough to work in most cases. Think of the major template files like node.tpl.php, views-view.tpl.php and block.tpl.php, for example, as having two purposes. The first is to provide a container and the second is the actual content, which can include any number of different elements inside it. Drupal does this reasonably well to begin with, but there is always room for improvement, and your needs may vary from site to site depending on the design.

As an example, look at the contents of the block.tpl.php file, shown in Listing 16–44, which is provided by Drupal’s Block module and can be found in modules/block/block.tpl.php. Most blocks, even those produced by other modules, will use this template file to output their contents. There could be a menu inside the block, a few paragraphs in a custom block, a snippet of JavaScript that will load an advertisement, a poll, a user listing, and so many other possibilities.

Listing 16–44. Default block.tpl.php implementation
  1. <div id="<?php print $block_html_id; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
  2. <?php print render($title_prefix); ?>
  3. <?php if ($block->subject): ?>
  4. <h2<?php print $title_attributes; ?>><?php print $block->subject ?></h2>
  5. <?php endif;?>
  6. <?php print render($title_suffix); ?>
  7. <div class="content"<?php print $content_attributes; ?>>
  8. <?php print $content; ?>
  9. </div>
  10. </div>

Using a simple custom block as an example, the template code in Listing 16–44 translates to the output in Listing 16–45.

Listing 16–45. Block output using the default block.tpl.php implementation
  1. <div id="block-block-1" class="block block-block first last odd">
  2. <h2>Block title</h2>
  3. <div class="content">
  4. <p>Block content.</p>
  5. </div>
  6. </div>

The resulting code is pretty minimal. In most cases, when creating custom themes, you will not want these to look the same, so you will use CSS to style them differently. It may not be immediately apparent, but there are some potential problem areas to take note of with the default block.tpl.php implementation. Certain design aspects need more flexible markup. Some examples of this include:

  • Grids: You may choose to lay out your blocks within regions using a CSS grid framework. This will prevent you from adding left and right padding/margins directly to the .block class.
  • Background images: Your design might require adding multiple background images to achieve a design for the block that is content agnostic. Sounds easy enough, right? The top and tiling background image can be declared in .block, but where can the bottom background image be defined? As soon as you add padding to the .block class itself, you lose the ability to place the second background image on the existing .content class.

The previous examples are a small taste of what you might encounter while coding a Drupal theme. You may be tempted to take the minimalist markup approach and deal with problems as they arise, and this is where we would stop you! As mentioned, these main template files are responsible for containing many types of content. You don’t want to create a new template file for every different kind just to modify structural aspects. It’s much more sustainable, not to mention easier to code, to create solid and flexible defaults and deal with exceptions as they arise.

This can be achieved fairly easily by separating structure from content. As shown in Listing 16–46, by simply adding <div class="inner"> to surround the contents, you can solve many potential problems before they arise. In the example of grids, padding can be applied to the <div class="inner">. As for background images, the top background image can be applied to .block, and the bottom can be applied to .block .inner or vice versa.

Listing 16–46. Modified block.tpl.php to contain a more flexible container structure
  1. <div id="<?php print $block_html_id; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
  2. <div class="inner">
  3. <?php print render($title_prefix); ?>
  4. <?php if ($block->subject): ?>
  5. <h2<?php print $title_attributes; ?>><?php print $block->subject ?></h2> <?php endif;?>
  6. <?php print render($title_suffix); ?>
  7. <div class="content"<?php print $content_attributes; ?>>
  8. <?php print $content; ?>
  9. </div>
  10. </div>
  11. </div>

You are reading content from two chapters on Theme Development from The Definitive Guide to Drupal 7, written by Jacine Luisi and published by Apress on July 19, 2011. All rights reserved.