Theming in Drupal 8 - Conversion of themes to Twig

undpaul icon
Luca Stockmann

This post adds to the successful and popular "Theming in Drupal 8 with Twig?" (Part 1, Part 2) series from Steffen. It deals with converting Drupal phptemplate themes to use the new Twig template engine, like we recently did with our Busy theme. This is all for Drupal 8, so this might not be helpful to you just yet, but if you wanna get a headstart on converting your phptemplate theme to Twig, nothing's holding you back from starting right now! If you don't know how to get your Drupal 7 theme to Drupal 8, there's an older write-up on how to convert a Drupal 7 theme to Drupal 8 in our blog (keep in mind that things in Drupal 8 change rapidly so some of that text might already be outdated).

First of all, Drupal 8 has Twig as its default template engine. That means if you don't write any other setting into the THEME_NAME.info.yml, Drupal will use Twig as its template engine. So, if the current theme is based on phptemplate, you must delete the line "engine: phptemplate" from your THEME_NAME.info.yml. In the following example it's line #5.   

busy.info.yml Raw
  1. name: Busy
  2. type: theme
  3. description: 'The ultimate Drupal business theme.'
  4. core: 8.x
  5. engine: phptemplate

After that you can start with the "real" rebuilding. Make sure you know the basic syntax and features of Twig.

Copy the template file and rename it from TEMPLATE_NAME.tpl.php to TEMPLATE_NAME.html.twig. Then you have to look at each line and replace PHP commands with Twig commands. The following example shows you such a conversion of a template file:

comment-wrapper.tpl.php Raw
  1. <div id="comments" <?php print $attributes; ?>>
  2.   <?php print render($content['comments']); ?>
  3.   <?php if ($content['comment_form']): ?>
  4.   <h2 class="title"><?php print t('Post new comment'); ?></h2>
  5.   <div>
  6.     <?php print render($content['comment_form']); ?>
  7.   </div>
  8.   <?php endif; ?>
  9. </div>

comment-wrapper.html.twig Raw
  1. <div id="comments"{{ attributes }}>
  2.   {{ comments }}
  3.   {% if form %}
  4.     <h2 class="title">{{ 'Post new comment'|t }}</h2>
  5.     <div>
  6.       {{ form }}
  7.     </div>
  8.   {% endif %}
  9. </div>

Similar conversions have to be applied to arrays and loops.

gistfile1.twig Raw
  1.   {% set users = ['Paul', 'Guenther', 'Max'] %}
  2.   {% for user in users %}
  3.     {{ user }}  
  4.   {% endfor %}

gistfile1.php Raw
  1. $users = array('Paul', 'Guenther', 'Max');
  2. foreach ($users as $user) {
  3.   echo $user;
  4. }

If you like to save some time, there is a nice Drupal 7 module called Twigify (sandbox-project). It tries to convert your theme automatically from a phptemplate theme to a new Drupal 8 Twig based theme. But keep in mind: complex code still needs to be edited manually.

So, don't be afraid of converting your themes to use the Twig template engine, it isn't that hard.

undpaul icon
Luca Stockmann
  • Drupal-Entwickler

Luca bereichert unser Team vom Auszubildenden zum Drupal-Entwickler seit 2012. In seiner Freizeit fährt er gerne Rennrad, auch mal in Südafrika, wo er für sechs Monate eine undpaul-Außenstelle gründete. Seit 2014 ist er Acquia Certified Developer.