Creating Custom Themes in Drupal 8 | Part 2

Lakshay

Drupal

Published on 16 Aug, 2018

3 min read

In my last blog Creating Custom Themes in Drupal 8 | Part 1 we made custom themes and added CSS, JavaScript, and basic page templates. In this blog, we will explore the twig template.

TL;DR

Following things will be covered in this blog:

Overriding twig templates
Twig naming conventions
Using Basic Conditions in twigs

Overriding Twig Templates

In Drupal twig provides the HTML code. Many times we need to change the layout or make some other changes in pages, regions, blocks etc.. In such cases we need to override the twig file. We can override each and every available twig template. We need to copy, edit and paste twig in our themes folder.

For overriding a twig template here are some steps:

Locate the template you want to edit

Let's take an example of the front page. Generally, the websites have a different design for the front page. We can override our normal page.html.twig file specifically for the front page so when you view page source for your websites front page you would see something like the image below:
The text in green is theme hook suggestions. These are very useful when you want to target a specific page or blog. In our case we want the changes to be applied only on the front page which makes the location of the seed page clear.
Copy and rename the file

Once you get to know the location simple copy the template, paste it in your theme folder and rename it according to the hook suggestions available. Once you have done this, clear the cache and confirm whether the output is coming from your twig or not.

View page source should appear as the image below:

Earlier the output was coming from page.html.twig now it's coming from page--front.html.twig.

You can, now, modify this twig according to your requirements.

Twig Naming Conventions

Drupal uses various conventions for naming twig files. Here are various examples:

HTML Templates

These templates provide General markup like <head>, <title>, and <meta> tags.

Example: html.html.twig

html.html.twig can be overridden with help of the theme hook suggestion.

Page Templates

These templates provide a general layout for various pages of your website.

Example: page.html.twig

Blocks, Regions, Nodes, Taxonomy, Fields, Views, Comments Templates

Every component has its own twig template which Drupal allows to override as discussed above.

For detailed information, you can visit the official Drupal 8 Twig Document for the same.

Conditions in Twig Templates

Sometimes we need to create a layout based on the 'if' and 'else' conditions. Mostly the case is with the sidebars.

There is a row, which has left sidebar on one side and content on the other. In this case, we need to create a condition such as if there is any block placed in the sidebar then the sidebar should occupy 4 out of 12 columns and the content region would get the remaining 8.

Similarly, if no block is placed in the sidebar, then the content region will take all the available 12 columns. Let's implement this. Here we will use the "if" condition and "set classes" in our twig file.

For better understanding we have used bootstrap grid layout, you can use any framework of your choice.

Case 1

Let's place the search block in the left sidebar region.

Clear the cache and visit frontpage of your website.

As we have placed the search block in the left sidebar region, the "if" and "set classes" conditions are satisfied. Twig, here provides the results for the left sidebar region.