Custom Theme Development with Twig in Drupal

Drupal's flexibility in theming allows developers to create custom, feature-rich themes for their websites. With the introduction of Twig as Drupal's templating engine, building themes has become more powerful, secure, and developer-friendly. This guide provides an overview of custom theme development in Drupal, focusing on the use of Twig templates, code examples, and key benefits.

What is Twig?

Twig is a templating engine for PHP, primarily used in Drupal since version 8. It's part of the Symfony framework and is designed to make templating more secure and efficient. Twig templates are clean, easy to use, and offer a layer of abstraction between PHP code and HTML, making themes more readable and maintainable.

Setting Up a Custom Theme in Drupal

To create a custom theme, you will need to set up a new folder in the themes directory of your Drupal site. This folder should contain essential files such as .info.yml, .libraries.yml, and Twig template files.

1. Create the Theme Folder

In the themes directory (usually /web/themes/), create a folder for your theme, e.g., my_custom_theme.

2. Define the Theme with `.info.yml`

The .info.yml file provides metadata for your theme. Create a file named my_custom_theme.info.yml in your theme folder with the following content:

name: 'My Custom Theme'
type: theme
base theme: stable
description: 'A custom theme built with Twig for Drupal'
core_version_requirement: ^8 || ^9
libraries:
  - 'my_custom_theme/global-styling'
regions:
  header: 'Header'
  content: 'Content'
  footer: 'Footer'

This file defines the theme's name, type, base theme, description, and supported regions.

3. Adding Styles and Scripts with `.libraries.yml`

To add CSS and JavaScript, define a .libraries.yml file in your theme directory:

global-styling:
  css:
    theme:
      css/style.css: {}
  js:
    js/script.js: {}

Now, add your style.css and script.js files in the corresponding locations within your theme folder.

4. Using Twig for Templating

With your theme set up, you can now create Twig templates. Drupal recognizes Twig files with the .html.twig extension, allowing you to structure HTML and use Twig syntax.

Using Twig Syntax

Twig syntax is simple yet powerful. Here are some key Twig features for theming in Drupal:

Variable Output: Use {{ variable }} to output a variable's value. For example, {{ content }} outputs the main content of a page.
Conditionals: Use {% if %} and {% else %} for conditional logic.
Loops: Iterate over arrays using {% for item in items %}.

Using Variables and Conditionals in Twig

Twig provides robust tools for handling logic within templates. For example, to check if a user is logged in and display a customized message, use the following code:

{% if logged_in %}

Hello, {{ user.username }}!

{% else %}

Welcome, guest! Please log in.

{% endif %}

Benefits of Using Twig in Drupal

Using Twig in Drupal theming offers several advantages:

Security: Twig escapes variables automatically, reducing the risk of XSS attacks.
Code Readability: Twig syntax is clean and easy to read, making templates more maintainable.
Separation of Logic and Presentation: Twig provides a clear separation between HTML and PHP logic, following MVC principles.
Better Debugging: Drupal’s devel module offers a Twig debug mode, helping you identify variables and template suggestions easily.

Customizing Templates Based on Context

Drupal allows you to create specific Twig templates for different content types, views, blocks, and other elements by using template suggestions.

Example: Custom Node Template

To customize how a specific content type is displayed, create a template like node--article.html.twig for the article content type. Here’s an example:

<article class="node--article">
    <h2>{{ label }}</h2>
    <div class="content">
        {{ content.field_body }}
    </div>
</article>

Place this file in your theme’s templates folder, and Drupal will use it to render nodes of the article type.

Debugging Twig Templates in Drupal

To enable Twig debugging, edit the services.yml file in your Drupal site's configuration folder:

parameters:
  twig.config:
    debug: true
    auto_reload: true
    cache: false

With debugging enabled, you’ll see template suggestions in the HTML comments of your page, making it easier to identify which templates are in use and what variables are available.

Conclusion

Custom theme development with Twig in Drupal offers a powerful, flexible way to create themes that are both secure and maintainable. By leveraging Twig's syntax and Drupal’s templating structure, you can create dynamic, responsive, and personalized themes for any project. The separation of logic and presentation, along with debugging tools, makes Twig an excellent choice for developers working with Drupal themes.

Start building your custom theme today to experience the full power of Twig in Drupal!

Published By: Kartik Sharma
Updated at: 2024-11-09 10:16:58