Last time in the Learning Drupal series, I provided an overview of theming in Drupal 7. In this post we're going to dig a bit more deeply and look at a practical example of how theming in Drupal 7 works. I'll also provide a few additional resources you can explore to help build your Drupal theming skills.

To reflect back for a moment on the last post, remember that web pages generated by Drupal are comprised of template files. These templates are provided either by Drupal, a contributed module or by a base theme - or by you if you write the template files yourself.

These templates are simply pieces of the final web page and are nested one inside the other as Drupal stitches them together to be returned to the browser. The number and type of templates included in a particular page depends on the content. For example, if your page contains a view, then templates from the Views module will be included and will be available to be overridden in your theme.

Inside our templates are variables that are printed to the page - things like the page title, the author, content, etc. These variables are not available inside every template, however. Often we will need to make changes to our theme in order to get the variables printed to the particular region of the page that we want.

Moving Things Around

I'm going to illustrate this sort of theming problem by using a post written by Katharine Kuhl as a guide. She discusses a problem she ran into when trying to move the breadcrumbs from one Omega theme template to another. This is a great practical demonstration of a very common theming challenge and it helpfully focuses on Omega theme, which has been the base theme highlighted in this series.

To clarify some of the points in her post, Katharine was trying to move the breadcrumbs from one part of the page to another. This bit of code was what needed to be moved:

&lt;?php if ($breadcrumb): ?&gt;<br> &lt;div id="breadcrumb"&gt;&lt;?php print $breadcrumb; ?&gt;&lt;/div&gt;<br> &lt;?php endif; ?&gt;

It prints the breadcrumb variable and by default Omega theme places this code in the zone--content.tpl.php template, but Katharine needed it to be in region--content.tpl.php. You might think that moving it would just be a matter of grabbing the code and pasting it inside the appropriate template, but with Drupal, things are not so simple. Just doing that will throw an error as one of the commenters on the post pointed out.

Another part of the solution was to place a preprocess hook (we'll discuss more about hooks later) in template.php. She later modified her approach and placed the code inside an include file.

If you're new to Drupal, your head may be spinning a bit. I know that when I first started out, mine certainly was. Hiding this sort of complexity is something that modules like Display Suite excel at, and if you don't want to slog through code, I recommend you take a look at DS and other similar modules to help you achieve your theming goals.

That said, if you're planning on working with Drupal long term, making an investment in how it works under the hood is certainly well worth it. You may also find that as great as some of those display modules are, they won't be able to do everything you want to accomplish. It's a little food for thought when considering how you want to use Drupal in your projects.

To summarize how Katharine moved the breadcrumbs in this example. 

1. She first went into Omega theme and copied two template files - zone--content.tpl.php and region--content.tpl.php - to her theme's templates folder. This allows her to override the content of those two templates.
2. Next, she moved the snippet of code that prints the breadcrumb from zone--content.tpl.php to region--content.tpl.php. At this point, both of these template files in her theme have been modified.
3. Finally, she used a hook to define where the breadcrumbs should go. She needed this second step because Omega theme uses the hook_process_zone() hook to declare where the breadcrumb should be. She needed to override this as well. She initially placed the hook in template.php, but later moved it to an include file. Either way is fine in this case.

Whew! That was a lot just to move some breadcrumbs, wasn't it? Not all of your changes to templates will be this complicated. If all you were trying to do was modify the markup - the HTML - then you would have only needed to copy the template file over and make your changes.

Working with Hooks

By now you probably see that making changes to a Drupal site often involves a number of moving parts. One of the most important ways to make changes is by using hooks, something that we touched on in the previous example. Hooks can be thought of as overrides. You can use these overrides in your theme, most often by placing them in the template.php file. 

One of the best set of tutorials on the subject of hooks that I've come across is by Danny Sipos. If you're interested in learning more about hooks, then I suggest you start with the first post in his series, but if you'd prefer to jump around, check out the complete listing. There is also a pretty good write up on Drupal.org as well.

These two resources may not answer all your questions about hooks, but they'll definitely point you in the right direction.

Other Resources

There are a few other resources I'd like to share that will help you get up to speed on theming concepts in Drupal 7. If you're more of a visual learner, there are some free video tutorials listed on Drupal.org that you may find helpful.

I'll also refer you to this article on the PACKT site by Ric Shreves that is an excellent overview and includes further references you may find useful.

A Final Note

This post concludes my Learning Drupal series. Originally I intended to write more posts for it, but since I began, Omega 4 has been deemed production-ready and Drupal 8 is looming on the horizon. Being the sort who can't resist a shiny penny, I'm going to move on to discuss what's happening on those fronts rather than continue with the current series. However, these lessons on Drupal 7 are still valuable. Drupal 8 is unlikely to be production ready for another six months or so after this posting (August 2013) and Drupal 7 sites will continue to predominate for a good while after that.

Hopefully this series has helped those of you new to Drupal become familiar with some of the concepts you'll need to build successful sites with this powerful CMS. If you'd like to keep up with my experiences exploring Omega 4 and Drupal 8, please sign up for email updates here on Friendly Machine. If you have any comments, provide them politely below.