How to convert your Drupal 6 theme to a Drupal 7 theme

When migrating your Drupal 6 to Drupal 7, one of the most important issues is the theme. Luckily, the base of the themes in Drupal 7 haven't changed that much, so the conversion is pretty straight-forward. Here are some tips for converting your theme, divided on different files in the theme.

.info File

All CSS and JavaScript files have to be included in the .info file. Before, you didn't need to include style.css and and script.js, since the theme engine automatically included them. This is not the case any more, so here is how to include them in your .info file:

stylesheets[all][] = style.css
scripts[] = script.js

PHPTemplate is the default theme engine.  In Drupal 6, it was necessary to include this line in the .info file:

engine = phptemplate

Since PHPTemplate is already the default theme engine in Drupal 7, this line can be safely removed.

 

Page.tpl.php

"Primary Links" is now "Main menu" and "Secondary Links" is "Secondary Menu".  This means at all the variables need to be renamed regarding "Primary Links" and "Secondary Links".

$primary_links => $primary_menu
$secondary_links => $secondary_menu

$help, $mission and $closure are now regions. So this means that the default regions ($left, $right, $content, $header, $footer) have three additional regions. $mission is also renamed to $highlighted and $closure is $page_bottom. And also, since we now have $page_bottom, we also have $page_top, which should be put right after <body>-tag. Like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
 "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
  ...
  <body>
      <?php print $page_top; ?>
      ...
      <?php print $page_bottom; ?>
   </body>
</html>

$content is a block, not a region. In other words, like in Drupal 6 you could only put blocks after the actual page content, now you can assign the $content as usual in page.tpl.php, but in the Blocks-page, you can change the actual page content position in the Content-region. This allows you to put blocks before and after the actual page content.

$left and $right are renamed, now they are called $sidebar_first and $sidebar_second.

Two new classes for hiding content in page, .element-hidden and .element-invisible. .element-hidden completely hides the element, but can be shown with f.ex. jQuery fadeIn() function. .element-invisible hides the element visually, but is still available for example screen readers.

$search_box is no more, instead it is a block.

 

Template.php

Function names in template.php have to have the relevant theme's name. So that means no more phptemplate-prefixed functions, they all need to converted to use the theme's name.

Alter hooks can now be used in themes. This includes: 

  • hook_page_alter
  • hook_form_alter
  • hook_js_alter
  • hook_css_alter

 

These are the main things that have changed in the new Drupal 7. By all means it's not all, there's A LOT more things that have changed, you can see them in Drupal.org: Converting 6.x themes to 7.x, but these should be enough for most themes to become usable in Drupal 7.

Add new comment