Theming with Twig in Drupal 10: A Beginner-Friendly Overview + Step-by-Step Tutorial

What is Twig?

Twig is a template engine that Drupal uses to control how content is displayed. It takes data from Drupal (like a page title or body text) and turns it into HTML.

Here’s a simple example:
 

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

<p>{{ content.body }}</p>
 

Twig is easy to learn because it uses {{ }} to print variables and {% %} for logic like conditions and loops.

Why Twig Matters in Drupal 10

Drupal 10 uses Twig because it’s:

• Secure: Twig automatically protects against dangerous code.
• Clean: Templates are easy to read, even for beginners.
• Flexible: You can override almost any part of Drupal’s HTML output.
   

Step-by-Step: Customizing a Node Template

Let’s say you’ve created a content type called “Article.” By default, Drupal gives it a simple layout, but you want to customize it.

Here’s how you can theme it with Twig:

1. Enable Twig Debugging (Optional but Recommended)

Turn on Twig debugging so you can see which templates Drupal is using.

In your services.yml file (usually at sites/default/services.yml), add:
 

twig.config:

  debug: true

  auto_reload: true

  cache: false
 

Clear the cache with:

drush cr
 

Now, when you view your site’s source code, you’ll see helpful comments showing which Twig files are being used.

2. Locate the Right Template

When you look at an article page, Twig debug will suggest templates like:

• node--article.html.twig (for the Article content type)
• node.html.twig (default for all nodes)

We’ll override node--article.html.twig to style just the Article type.

3. Create the Template in Your Theme

Inside your custom theme folder (e.g., themes/custom/mytheme/templates/), create a new file:

node--article.html.twig

4. Add Custom Twig Code

Open the new file and start with something like this:
 

<article class="article-node">

  <header>

    <h1>{{ label }}</h1>

    <p class="author">By {{ node.getOwner().getDisplayName() }}</p>

    <p class="date">{{ date }}</p>

  </header>

  <div class="article-body">

    {{ content.body }}

  </div>

  <footer>

    <p class="tags">Tags: {{ content.field_tags }}</p>

  </footer>

</article>
 

Here’s what’s happening:

• {{ label }} prints the article title.
• {{ node.getOwner().getDisplayName() }} shows the author’s name.
• {{ date }} displays the published date.
• {{ content.body }} prints the main body text.
• {{ content.field_tags }} outputs the tags.

5. Add Some Styling

In your theme’s CSS file, you can style the new template:
 

.article-node {

  max-width: 700px;

  margin: auto;

  font-family: Arial, sans-serif;

}

.article-node header {

  border-bottom: 1px solid #ccc;

  margin-bottom: 20px;

}
 

6. Clear Cache and Check Your Work

Twig changes don’t show up until you clear the cache. Run:

drush cr
 

Now reload your article page and see your custom design in action.

Real-Life Use Case

Let’s say you’re building a blog for a client. With this setup, you can give each content type (Articles, Events, Products) its own look by creating separate Twig templates like node--event.html.twig or node--product.html.twig.

This keeps your site structured and professional while allowing unique designs for different content types.

Conclusion

Twig makes theming in Drupal 10 both powerful and beginner-friendly. By overriding templates and writing simple Twig code, you can completely control how content looks on your site.

Whether you’re customizing a single field, redesigning a page layout, or building a full theme from scratch, Twig is the tool that makes Drupal’s theming flexible and secure.

For more details, check out:
 

• Drupal.org – Twig in Drupal Theming
• Twig official documentation