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.
Here are the steps involved in this process:
- Create Folders
- Create Regions in the info.yml file
- Add Regions to page.html.twig file
- Understand the role of all .twig files
- Add the CSS file
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.
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!
Create interactive Drupal websites easily on the Cloud.
Host your website on optimized Drupal hosting servers.