Twig Templates | Theming | Drupal Tutorial

What is Twig?

Twig is a modern template engine for PHP, designed to be fast, secure, and flexible. It is the default templating engine used in Drupal 8 and later versions. Twig allows developers to separate the presentation layer from the application logic, resulting in cleaner and more maintainable code.

Getting Started with Twig in Drupal

To start using Twig in your Drupal project, ensure that you have a working Drupal installation. Twig templates are typically located in the templates directory of your theme.

Here's how to create a simple Twig template:

Creating a Twig Template

1. Navigate to your theme folder at web/themes/custom/YOUR_THEME/templates.

2. Create a file named example.html.twig.

3. Add the following code to your example.html.twig file:


                        <div class="swf-lsn-example-template">

                          <h1>Welcome to My Twig Template!</h1>

                          <p>This is a simple example of a Twig template in Drupal.</p>

                        </div>

Using Variables in Twig

Twig allows you to use variables within your templates. Variables can be passed from the Drupal backend to the Twig templates. Here’s how to use variables:

Example of Variables

Modify your example.html.twig to include variables:


                        <div class="swf-lsn-example-template">

                          <h1>{{ title }}</h1>

                          <p>{{ content }}</p>

                        </div>

In this example, {{ title }} and {{ content }} are Twig variables that Drupal will replace with actual values when rendering the page.

Control Structures: Conditions and Loops

Twig supports various control structures, such as conditions and loops, allowing you to create dynamic templates.

Using Conditions


                        <div>

                          <h1>Welcome</h1>

                          <{% if user.is_logged_in %}>

                            <p>Hello, {{ user.name }}!</p>

                          <{% else %}>

                            <p>Please log in.</p>

                          <{% endif %}>

                        </div>

Using Loops


                        <ul>

                          <{% for item in items %}>

                            <li>{{ item }}</li>

                          <{% endfor %}>

                        </ul>

Extending Templates

One of the powerful features of Twig is the ability to create template inheritance. This allows you to define a base template and extend it in child templates.

Creating a Base Template

Create a file named base.html.twig:


                        <html>

                          <head>

                            <title>{% block title %}My Site{% endblock %}</title>

                          </head>

                          <body>

                            <header>Header Content</header>

                            <main>

                              {% block content %}{% endblock %}

                            </main>

                          </body>

                        </html>

Extending the Base Template

Now, create a child template that extends the base template:


                        <{% extends 'base.html.twig' %}>

                        <{% block title %}My Child Page{% endblock %}>

                        <{% block content %}>

                            <p>This is the child page content.</p>

                        <{% endblock %}>

Conclusion

Twig is a powerful and flexible templating engine that enhances the way you build themes in Drupal. By utilizing Twig, you can create clean, maintainable templates that leverage the power of variables, control structures, and template inheritance.

As you continue to develop with Drupal, mastering Twig will help you create more dynamic and user-friendly themes.

Twig Templates Tutorial