Drupal 7 Theming with Twig

Meet Twig

The biggest Drupal 8 innovation for front-end developers is use of the Twig template engine. Twig provides a simple and concise syntax for building HTML templates. Here’s a snippet of a template in the Drupal 7 theming engine (PHPTemplate):

<?php if ($page["footer"]): ?>
  <div id="footer" class="clearfix">
    <?php print render($page["footer"]); ?>
  </div>
<?php endif; ?>

Here’s the same snippet in Twig:

{% if page.footer %}
    <div id="footer" class="clearfix">
        {{ page.footer }}
    </div>
{% endif %}

Twig also features template inheritance to make it easy to reuse structures and elements in different templates, which saves time, simplifies maintenance, and enforces consistency across a website. For example, a website may use a standard page layout consisting of an image, title, intro text and body, but specific page types require slight variations to this structure. There could also be an event page with the date and location in place of the intro text and blog pages may have the author’s name above the body.

Using PHPTemplate we would create the standard layout and then copy it to two new files: one for events pages and the other for blog pages and make our modifications to earch. If a design change requires changes to structure of the page, these changes will have to be repeated in all three templates.

Twig solves this problem by letting us identify sections of a template as blocks. We can then create ‘child’ templates that inherits the parent content, so we only need to code the block that will be overwritten. For example, our event page template may look something like this:

{% extends "standard.tpl.twig" %}
{% block intro_text %}{{ content.date }} - {{ content.location }}{% endblock %}

If the parent template (in this case, standard.tpl.twig) changes, those changes are reflected in the child templates as well.

Building Our Drupal 7 Twig Theme

Thanks to René Bakx’s Twig for Drupal 7 template engine we didn’t have to wait for Drupal 8 to get started. The engine replaces the standard Drupal 7 PHPTemplate engine so Drupal 7 themes can be built with Twig.

Building the Twig theme meant translating a lot of base Drupal templates into Twig. This turned out to be the perfect opportunity to build a custom theme from the ground up, remove extra wrappers and classes that Drupal adds by default, and update page structures to use HTML5 semantic markup. All this resulted in a cleaner, lighter, and more modern base theme.

Once the base Twig theme was done the next step was to make it responsive. We have had good experiences with Zurb Foundation as a front-end framework for previous websites and decided to use it to build a responsive Twig theme. Thanks to Twig’s template inheritance feature we only had to modify the template sections that needed special Foundation wrappers. Finally we added in the Foundation library, hooked up the JavaScript and stylesheets and we were ready to roll!

The Rubber Meets the Road

All we needed now was an opportunity to try out our new theme. Fortunately we didn’t have long to wait. A client asked us to build a small, responsive website, so we fired up our Twig Foundation theme and took it for a spin. I’m happy to report that it handled beautifully. You can check out result at the Standards Institute site.

Looking to the Future

Drupal 8 is right around the corner. It’s already in beta and we hope to see a release version sometime this fall. But that’s no reason to stop improving and extending our Drupal 7 theme. Because it’s written in Twig, the templates we build today will still work with Drupal tomorrow.