Mastering Drupal 8

The nice thing about Drupal is that, by default, the core system provides us with all the templates we need to use. So, knowing where to find the core templates is important because it will allow us to copy them into our own theme folder to override with our own markup.

Let's begin by browsing the /core/modules folder. Contained within this folder are the core modules that make up Drupal, along with their respective templates. Most of the core templates will be in the /core/modules/system/templates folder.

If we browse the contents of the templates folder, we will note that some of the most common templates we will be using includes the following:

html.html.twig: HTML wrapper
page.html.twig: Page wrapper
region.html.twig: Region wrapper

Three more template folders that we need to be aware of are as follows:

/core/modules/node/templates: This contains the templates for nodes
/core/modules/comment/templates: This contains the comment templates
/core/modules/block/templates: This contains the templates for blocks

We will find ourselves frequently overriding templates, so we need to make sure that we know where to find any Twig template that we will be theming.

Most of us have done some PHP development or are at least familiar enough with it to work with the variables that Drupal outputs. So, as we observe templates, we should be noticing that the files don't end with a file extension of .php, but instead end with a file extension of .twig. In fact, if we were to look at the html.html.twig template located in the /core/modules/system/templates folder, we won't even find PHP syntax inside it:

<!DOCTYPE html> 
  <html{{ html_attributes }}> 
    <head> 
      <head-placeholder token="{{ placeholder_token|raw }}"> 
      <title>{{ head_title|safe_join(' | ') }}</title> 
      <css-placeholder token="{{ placeholder_token|raw }}"> 
      <js-placeholder token="{{ placeholder_token|raw }}"> 
    </head> 
    <body{{ attributes }}> 
      <a href="#main-content" class="visually-hidden focusable"> 
        {{ 'Skip to main content'|t }} 
      </a> 
      {{ page_top }} 
      {{ page }} 
    {{ page_bottom }} 
    <js-bottom-placeholder token="{{ placeholder_token|raw }}"> 
  </body> 
</html>

Instead, we will see a general HTML markup along with the Twig syntax that will output content within its place. We will take a closer look at Twig a little later.

Table of Contents for
Mastering Drupal 8

Where to find templates

Table of Contents for Mastering Drupal 8

Table of Contents for
Mastering Drupal 8