Twig is a flexible template engine for PHP. In Drupal 8, Twig is using as a default template engine. Twig is flexible, fast, and secure. You can find more details of PHP twig templates in this website.
Here we are going to discuss how we can integrate twig in Drupal 8. We will go through how to use the twig template and how we can add a new template for a block.
As we were using PHP inside the tpl files in Drupal 7, we cannot include PHP code inside twig templates. Even though twig providing some features to manipulate data in the template.
Use of `if`
{% if var1 = var2 %}
Working with ‘for’ loop
<li>{{ user.username|e }}</li>
{% endfor %}
In the above example variable ‘users’ is an array and it contains usernames in a variable called username.
Define Custom template
Now let us see how we can define custom templates in Drupal 8.
Template naming conventions are almost the same as in Drupal 7 but file types will be twig.html instead of tpl.php.
Page template:
Drupal 7 - page.tpl.php
Drupal 8 - page.html.twig
You can use the following template for your homepage page--front.tpl.php
Enable twig debugging to identify template
In Drupal 8 all templates are coming with Drupal core and we can override any template by copying it into our own theme folder.
But before copying a template first we need to identify which default template is currently using for that section. For that, we need to enable twig debug mode in Drupal settings. To enable the debug mode, go to ‘/sites/default’ folder and copy-paste ‘default.services.yml’ file and rename as ‘services.yml’. Then open file ‘services.yml’. Now find for ‘twig.config:’ and set value ‘true’ for the ‘debug’ option.
# Twig debugging:
#
# When debugging is enabled:
# - The markup of each Twig template is surrounded by HTML comments that
# contain theming information, such as template file name suggestions.
# - Note that this debugging markup will cause automated tests that directly
# check rendered HTML to fail. When running automated tests, 'debug'
# should be set to FALSE.
# - The dump() function can be used in Twig templates to output information
# about template variables.
# - Twig templates are automatically recompiled whenever the source code
# changes (see auto_reload below).
#
# For more information about debugging Twig templates, see
# https://www.drupal.org/node/1906392.
#
# Not recommended in production environments
# @default false
debug: true
Then save the ‘services.yml’ file and clear Drupal cache. Then reload the page and check view-source of page. Here we go now you can see the current template using and other suggested templates for each section.
<!-- THEME HOOK: 'html' -->
<!-- FILE NAME SUGGESTIONS:
* html--front.html.twig
* html--node.html.twig
x html.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/bootstrap/templates/system/html.html.twig' -->
Now let us see how to override the default template for search block.
After enabled debug mode by checking the source you can see that default search block is using the following template ‘core/themes/bartik/templates/block--search-form-block.html.twig’.
To override the default template copy the template file from the above location and place it inside your theme folder. Then clear the cache and reload the page and check the page source. You can see that now Drupal will use the new template from your theme folder.