Drupal Tutorials

Converting Drupal themes from Drupal 6 to Drupal 7 - My favourite additions & changes

You should have good knowledge of Drupal theming and Drupal 6.

With Drupal 7 going into alpha 6 the official launch is getting ever closer so I thought it was about time I got stuck in and started looking at updating my themes to Drupal 7.

The excellent theme conversion documentation available on drupal.org gives a great overview so I’ve picked out some of my favourite additions and changes brought into Drupal 7 theming.

Blocks have new, more meaningful CSS IDs

I’d say it’s about time this happened. Core CSS block IDs now have more meaning that relates to their functionality.

Some examples:

Recent blog posts
Old CSS ID (Drupal 6): block-blog-0
New CSS ID (Drupal 7): block-blog-recent

Recent comments
Old CSS ID (Drupal 6): block-comment-0
New CSS ID (Drupal 7): block-comment-recent

HTML classes generated through a variable

This is something I used to patch into my node.tpl file & preprocess_node hook but now it has been included in core.

Each template (.tpl file) now has a $classes variable which now gives themers a standard way to add HTML classes to their template files:


<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
.....
</div>

The $classes variable can be added to in your preprocess hooks using the $classes_array:

<?php

/**
* example taken from core bartik theme
*/
function bartik_preprocess_block(&$variables) {
 
// Set "first" and "last" classes.
 
if ($variables['block']->position_first){
   
$variables['classes_array'][] = 'first';
  }
  if (
$variables['block']->position_last){
   
$variables['classes_array'][] = 'last';
  }
 
// Set "odd" & "even" classes.
 
$variables['classes_array'][] = $variables['block']->position % 2 == 0 ? 'odd' : 'even';
}
?>

HTML attributes generated through a variable

Now all template (.tpl) files can output 3 new variables; $attributes, $title_attributes, and $content_attributes which like the $classes variable mentioned above can be altered or added to in your preprocess functions.

Nice additions to drupal_add_css() function

The drupal_add_css() function is used to attach CSS files to pages and the following functionality has been added:

  • ‘weight’ – You can now weight your CSS file loading although I can’t think of too many times when you’d need this.
  • ‘browsers’ – You can now browser-targeted your CSS files, so you can easily add IE CSS fixes without needing to add <!—[if lt IE 7]> code to your templates, which is great in my opinion.

Variable process functions can now be used for all theming hooks

Previously you could only use preprocess functions (called before the theme template to add/alter variables that go into the .tpl file) in your theme when a .tpl file was defined for the theme function output:
template (.tpl) file:

<div class="some-div-title">
  <?php echo $some_custom_var; ?>
</div>

Related hook_preprocess:
<?php
function THEME_preprocess_HOOK(&$vars) {
  if (.....) {
   
$vars['some_custom_var'] = t('Hi there');
  }
}
?>

BUT now all theme hooks can have a hook_preprocess and a new hook_process (see notes on that below) which can be used to add new variables & alter current variables which are passed to the define theme function:

theme_ function:

<?php
function theme_something_nice()
 
$output = $some_custom_var;
  return
$output;
}
?>

Related hook_preprocess:
<?php
function THEME_preprocess_HOOK(&$vars) {
  if (.....) {
   
$vars['some_custom_var'] = t('Hi there');
  }
}
?>

Function names must match theme name

This will save a fair bit of confusion! When overriding module theme functions in your theme you can no longer use the phptemplate_ prefix and instead have to use the name of your theme as a prefix instead:

Drupal 6:

<?php
/**
* both examples work in Drupal 6
*/
function phptemplate_breadcrumb() {
......
}
?>

Drupal 7:

<?php
function THEMENAME_breadcrumb() {
.....
}
?>

Read more on why the phptemplate prefix was removed.

Granular rendering in node and user templates

Ever hacked up your node.tpl.php file and print bits of the $node object all over the place to get the content layout exactly as you want? Well with the new render & hide functions things just got a little easier!!
The $content variable is now a keyed array of the content values including field values, comments, file attachments or other node components which vary depending on the view mode (full, teaser etc). If you’d like to go deeper check out the the node_build_content API doc on api.drupal.org

Here’s an example from the Garland theme node.tpl.php file, as you can see the node links & comments can be pulled out and rendered as where you please:

  <div class="content clearfix"<?php print $content_attributes; ?>>
    <?php
     
// We hide the comments and links now so that we can render them later.
     
hide($content['comments']);
     
hide($content['links']);
      print
render($content);
   
?>

  </div>

  <div class="clearfix">
    <?php if (!empty($content['links'])): ?>
      <div class="links"><?php print render($content['links']); ?></div>
    <?php endif; ?>

    <?php print render($content['comments']); ?>
  </div>

Alter hooks available to themes!!

This is by far my favourite addition.
The following alter hooks have now be added or made available to use in your themes:

  • hook_page_alter – This is a new D7 hook which allows all variables displayed on a page to be alter or hidden.
  • hook_form_alter – I’ve lost count of how many times I’ve wanted to make a small tweak to a form without wanting to override the form theme or create a custom module.
  • hook_js_alter

These additions give even more power to Drupal theme developers which is brilliant news!! :) :)

Theme suggestions available for theme_menu_link() and theme_menu_tree()

I’ve previously used the awesome menu_block module to theme out menus better as it uses a similar theme suggestion engine that is now available in Drupal 7.

The new suggestion work for both theme_menu_tree which provides some wrapper HTML for the menu and theme_menu_link which does the actual rendering of the menu link, so you can override these functions per menu.

Here’s a simple example for a theme_menu_link override for a fictional user called “account” where we simply add an extra <span> around the link to give us another HTML element to theme with:

<?php
function THEMENAME_menu_link__account($variables) {
 
$element = $variables['element'];
 
$sub_menu = '';

  if (
$element['#below']) {
   
$sub_menu = drupal_render($element['#below']);
  }
 
$output = '<span>'. l($element['#title'], $element['#href'], $element['#localized_options']) .'</span>'; //add extra span tag here for theming
 
return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}
?>

hook_preprocess is now followed by hook_process

I’m still a little hazy on the exact usage of the new hook_process so I wouldn’t consider it a favourite of mind….yet but I thought it should be mentioned.
The idea is that hook_preprocess is run first to define values of variables then hook_process is fired after to render variables.
An example being the $classes_array is defined/constructed in hook_preprocess and is then rendered into the $classes string in hook_process.

That concludes my favourite additions to Drupal 7 theming but please note that with Drupal 7 still being developed some of this functionality could (although unlikely) change so comment below if you find something has changed or add your favourite additions.

Commenting on this Tutorial is closed.

Categories:

Comments (79)

Ricky Purnell Web Design's picture

Nice tutorial, good to have a little heads up without having to read the full spec as it were.

I have been reading out some of your posts and i can claim pretty good stuff. I will definitely bookmark your site.
Rose

I would like to second that buddy. Been learning a lot about Drupal since I have been visiting this blog. tampa injury attorney

These codes work!
Great tutorial dude, thank you. hyip monitor hyip monitoring hyip monitoring hyips monitoring hyips monitors

Very interesting. I hadn’t thought of some of these things before. Thanks.
tantric massage London

I just couldn’t leave your website before telling you that we really enjoyed the quality information you offer to your visitors… Will be back often to check up on new posts
car spares parts

i know i’m a little off topic, but i just wanted to say i love the layout of your blog. i’m new to the blogegine platform, so any suggestions on getting my blog looking nice would be appreciated.
phlebotomy classes

Indeed it is :) 84 inch shower curtain over the door towel rack This is some amazing info indeed. Big thumbs up to this. lane recliner chairs

customized paper
I would like to second that buddy. Been learning a lot about Drupal since I have been visiting this blog.

great suggestions, thanks.

webgal's picture

Very helpful and easy to understand. And it is very much detailed,so even newbie’s like me can catch on. Thanks for sharing.
Free Plant Images

Come prepared by doing thorough research on the organization. However, some of these rules don’t necessarily apply to every situation.
viagra kaufen

And one of my friends suggested me to visit Drupal site.He was so excited that he found this site and had so many benefits from this..So I am also here to learn a lot from this site.OSB Board thanks for your help in future..

Drupal is a free and open source content management system and content management framework.Thanks for sharing the informative post. Regards. Company locations UK

These kind of post are always inspiring and I prefer to read quality content so I happy to find many good point here in the post, writing is simply great, thank you for the post
cell phone spy software

The point after and canadian football point after touchdown is a one scrimmage down played immediately.Thanks for sharing the informative post. Regards. Petit Pois

I’d say it’s about time this happened. Core CSS block IDs now have more meaning that relates to their functionality.. Free Cell Phone Spy

A great tutorial. I was looking for this before and found this very useful business school grants

VAG's picture

As was I. I was searching for this information for about 3 days. Thanks OP!san diego computer repair

Yeah same ere! Glad I found such valuable info. nothing beats.
thinning hair

Thanks a lot for providing the great info is visible in this blog that to using the great technology in this website. I am very much happy for using the great services in this blog. Wholesale childrens clothing

Superb, I was looking for this…I had some trouble with the coding.
b&b istanbul

This is so cool. I am such a huge fan of their work. I really am impressed with how much you have worked to make this website so enjoyable.
drupal themes

Thank you for this article. Will be really useful as I convert existing themes to work with Drupal 7

Need to learn PHP – PHP Tutorials

Thanks for useful tutorial.

The way you do theme suggestions also changed. I converted a bunch of custom ones for Drupal 6 into Drupal 7 that I used previously. Also outlined what’s available by default.
Drupal 7.0 Preprocess Page Templates – theme_hook_suggestions

I am such a huge fan of their work. I really am impressed with how much you have worked to make this website so enjoyable.
pc games download

Thanks for the tutorial, me and a friend have been looking to this for a while, great help.
canvas art

This is my first time i visit here. I discovered a lot of interesting things within your blog especially its discussion.
price of silver today
price of silver today per ounce

Very helpful and easy to understand. And it is very much detailed,so even newbie’s like me can catch on. Thanks for sharing. Canvas Prints

Great blog, thanks for sharing. anniversary gifts

Gracias por compartir este post de regalos originales para fiestas. regalos originales

very good site number one topic. And it is very much detailed,so even newbie’s like me can catch on. Thanks for sharing. aşk sözüMynet

Wow, nice post,
there are many person searching about that now they will find enough resources by your post
Bit Noticias

I think you may also have to reconsider your three content types field and see whether some of them are common to each other. In that case you will also have to use node reference field type[url=http://www.vardera-min-bostad.se]gratis värdering av hus [/url]

Really nice tutorial for the theme changes, I havent decided how much I like D7 as of yet, but I do love the new hooks. A hook for everything, and less cluttered code. I haven’t as of yet gone into the theming layer, apart from hook_username_alter, which I do adore.

http://mydrupalsnippets.wordpress.com/

The methods you described above would help me to retrieve the alias of the page, but that isn’t sufficient to pass to views to process and retrieve the related information for me.Running // Tennis Shoes

It is to say i do love the new hooks. A hook for everything, and less cluttered code. I haven’t as of yet gone into the theming layer, apart from hook_username_alter, which I do adore.Than yu.
unlock iphone 4

I wonder how you got so good.
Generic Viagra || Kamagra
This is really a fascinating blog, lots of stuff that I can get into. One thing I just want to say is that your Blog is so perfect!

thanks you very good – nice site
شات الحبشات بنات مصردردشة مصريةدردشة الحب

very nice
thanks

Very helpful and easy to understand. And it is very much detailed,so even newbie’s like me can catch on. Thanks for sharing.
buy facebook likes

There will be significant differences when we see the issue from different side of angle. And this is going to be something that is very much informed in this could have been some thing we can see.
austin moving companies

Thanks for the tutorial, it was great help

Originelle Weihnachtsgeschenke

digipham's picture

There is nothing more rewarding than working with an Aktion Club. My husband and i look forward to attending their meetings and going to the Aktion Club convention with them.
pharmacy schools
pharmacy colleges

It would be good to add information about the improvements about the new support for weights in drupal_add_js() and drupal_add_css(). The ability for inline styles via drupal_add_css() is also a good mention. top gifts for men 2011 christmas toys 2011

The change is very good, thanks!
From:
Representative of Vietnam airlines
and Thiet ke website
And I will introduce with all people about that
Vietnam guide

The main idea of online shopping is not just in having a good looking website that could be listed in a lot of search engines or the art behind the site. It also is not only just about disseminating information, because it is also about building relationships and making money. Mostly, braindumps / a+ braindumps / ase braindumps / ccda braindumps / ccent braindumps / ccia braindumps / ccie braindumps / ccip braindumps organizations try to adopt techniques of online shopping without understanding these techniques and/or without a sound business model. Rather than supporting the organization’s culture and brand name, the website should satisfy consumer’s expectations.

thanks for sharing.
ray ban prescription eyeglasses

This is a great tutorial post. thanks rosei-tv