Integrate Twig and Structural Components – Drupal 8 Theming Tutorial Part 3

In the previous part of this series, I discussed how to disable the cache and enable Twig debugging to allow for a smoother Drupal 8 theme development experience. I highly recommend these two action items as they will save you from the hassle of clearing your website’s cache every time you make any changes to your theme.

In this part of the tutorial, I am going to show you how to define regions in your theme and go about adding CSS and Javascript files.

Here are the steps involved in this process:

1. Create Folders
2. Create Regions in the info.yml file
3. Add Regions to page.html.twig file
4. Understand the role of all .twig files
5. Add the CSS file
6. Add Javascript

Create Folders

First, I will revisit the theme folder that I created for the theme in the first part of this series. Once in, I will create folders for CSS, JS, Templates and Includes.

The CSS folder is for the style.css file, which the theme will use for CSS properties. The same goes for the JS folder. Templates and Includes folders are new and require further explanation. The Templates folder will house the Twig templating files. The Includes folder is used to add 3rd party libraries such as bootstrap etc. After you are done, the file structure should look like this:

Create Regions in the info.yml file

Next, I will add regions to the theme. In the simplest terms, a Drupal theme is broken down into regions such as header, sidebar, footer, content etc. These regions break down a web page into different sections. For instance, the header region correlates to the top part of a web page, where the main navigation menu is usually located. These regions will first need to be declared in the info.yml file. For this, add the following lines to your theme’s info.yml file:

regions:

     headline: headline

     header: header

     content: content

     sidebar: sidebar

     footer: Footer

These lines will define the regions of the theme. However, merely defining these regions in this file is not enough. I also need to add these to the page.html.twig file.

Add Regions to page.html.twig file

I will now add a new file to the templates subfolder I created earlier in the theme folder. This file will be renamed page.html.twig. Drupal uses this file to render the structure of the website.  You can imagine the importance of this file.

This file contains the HTML skeleton that forms the basic structure of the theme. I will now add the following code to the file. This will add the regions I defined in the info.yml file. (Note: this is an example, you will have to add the code in accordance with the regions you defined in the info.yml file)

<div id="page">
   <section id="headline">
   </section> 
   <header>
   </header>
   <section id="main">
   </section>
   <footer>
   </footer>
</div>

Understand the Role of all .twig files

Before moving on, I will describe the location and purpose of all the twig templating files.

All the .twig files are stored in the core\modules\system\templates\page.html.twig directory. You should check out these files anytime you get stuck or feel confused about the purpose of their code.

Now that you know the location of the .twig files, let’s now take a look at what each of the .twig files is used for:

themename.info.yml – defines the theme
themename.theme – programs the theme

html.html.twig – defines every page on the site

  page.html.twig – defines every page on the site

     node.html.twig – defines every node on the site

      region.html.twig – defines every region on the site

        block.html.twig – defines every block on the site

          field.html.twig – defines every dynamic element on the site

Add the CSS File

Next, I will show you where to add the style.css file that we added in the libraries.yml file in the first step. The style.css file will be created inside the CSS subfolder that I created inside the theme folder in the first step. This file will contain all the  CSS styling elements for the theme.

Add Javascript

The JavaScript file will be added the same way as the CSS file. As you might have guessed, this file will be added to the JS subfolder inside the main theme folder. Since I referenced the main.js file in the first part of this tutorial series, I will create a new file named main.js. This file will be used to define all the JavaScript properties used by the theme.

Conclusion

In this part of the Drupal 8 theme development tutorial, I described how to add CSS and JavaScript files. I also defined the main HTML structure. I also highlighted the purpose of twig files.

In the next part, I will discuss twig files in more detail, how to add 3rd party libraries such as bootstrap and round off by adding content to the theme.

Until next time, happy coding!

Hamza Zia

Hamza is a Drupal Community Manager at Cloudways - A Managed Drupal Hosting Platform. He loves to write about Drupal and related topics. During his free time, he can be seen obsessing over Football, Cars, Android and Gaming.

Get Connected on: Twitter Community Forum