An Introduction to Twig in Drupal 8 Themes

Twig is a template framework and is a direct replacement for PHPTemplate.

Unlike PHPTemplate which was developed in-house by Drupal developers, Twig comes from the wider PHP world.

Twig was created created by SensioLabs, the same people who develop the Symfony2 framework. Drupal 8 is using Symfony2 to overhaul its codebase. Because Twig is natively supported by Symfony2, it was a logical choice to use for Drupal themes.

You can find the Twig website at http://twig.sensiolabs.org.

• Pico CMS
• Craft CMS
• Bolt CMS
• Curry CMS

Without a doubt, Drupal 8 will be by far the largest platform using Twig.

• Twig has its own coding standards and documentation.
• Drupal 8 has its own standards for Twig.
• There is a http://drupaltwig.org but that is mainly of interest to people bug-shooting issues with the Drupal 8 implementation.

However, as you saw above, there aren’t too many people using Twig yet. There are no books available and there’s currently a shortage of online tutorials. I suspect that will start to change when Drupal 8 arrives.

Maybe it would be easier to answer that question in reverse … how has Twig not changed Drupal 8 themes?

Let’s compare two snippets from Bartik in Drupal 7 and 8. These snippets have an identical function.

This is Drupal 7 and the node.tpl.php file:

<?php print render($title_prefix); ?>
<?php if (!$page): ?>
<h2<?php print $title_attributes; ?>>
<a href=”<?php print $node_url; ?>”><?php print $title; ?></a>
</h2>
<?php endif; ?>
<?php print render($title_suffix); ?>

This is Drupal 8 and the new node.html.twig file:

{{ title_prefix }}
{% if not page %}
<h2{{ title_attributes }}>
<a href=”{{ node_url }}”>{{ label }}</a>
</h2>
{% endif %}
{{ title_suffix }}

The only things that haven’t changed in those snippets are the H2 and a tags.

Compare the two side-by-side:

• <?php print $title_attributes; ?> has been replaced by {{ title_attributes }}
• <?php print $node_url; ?> has been replaced by {{ node_url }}
• <?php print render($title_suffix); ?> has been replaced by {{ title_suffix }}

Looking at it that way, it’s fair to say that Twig has produced much more readable code than the PHP did.

Yes, in addition to Bartik and Stark, there’s just over 35 themes with Drupal 8 versions.

The five following point are all shamelessly plagiarized from Jen Lampton, who leads the Twig project. She’s given a whole series of presentations on Twig in Drupal.

Jen outlines 5 pain points with Drupal 7 themes. The first is syntax.

Drupal 7 mixes up data types including strings, objects and arrays. It also has multiple different ways of printing variables such as $node->nid and then $node_url.

Drupal 8 will access all variables consistently, for example {{ node.nid }} and {{ node_url }}

Sometimes Drupal 7 relies on template files, other times it relies on functions. This can make it hard to understand how to override some parts of the Drupal core.

Drupal 8 only uses template files.

Jen produced two images to illustrate how much simpler Drupal 8’s theme system will be.

Here’s Drupal 7:

And here’s Drupal 8:

There’s a lot of duplicated code in Drupal 7 themes.

Drupal 7 would have multiple files with the same lines of code, including:
<div id=”node-<?php print $node->nid; ?>” class=”<?php print $classes; ?> clearfix”<?php print $attributes; ?>>

Drupal 8 uses lines like this: {% extends “node.html.twig” %}. This means you can use proper inheritance inside your theme files and eliminate a lot of duplicate code.

Drupal 7 would often print out unsanitized data. You could even run database queries from directly inside the theme files.

Drupal 8 can automatically sanitize variables and won’t permit unsafe functions to run.