We may have heard the term "template" before when talking to someone about theming and Drupal. But what exactly is a template? We can think of a template as a text file no different from any HTML document that provides a method for separating the presentation layer from the business logic. In traditional PHP websites, we have the ability to mix PHP with HTML and CSS, which makes managing web pages both difficult and dangerous. Drupal provides us with the ability to use templating engines to enforce the separation of the two, so we can begin to focus more on the HTML and CSS and worry less about the PHP.
In general, templates can contain HTML markup and PHP variables that output content contained within a Drupal database. Templates can be as small as a few lines of HTML that hold the presentational layer for a block that is displayed in a region on the page, or the actual page itself, with containers defined for header, content, and so on.
To get a better idea of what this looks like, let's take a look at the following image:
If we break down the image into logical sections of a website, we can begin to get an idea of what constitutes a template. A template can be any of the following:
- HTML wrapper: This contains the top-level HTML markup, including title, metadata, style sheets, and scripts, and it is commonly referred to as
html.html.twig. - Page wrapper: This contains the content generally found between the body tags of an HTML document, and it is commonly referred to as
page.html.twig. - Header: This is also known as a region, generally containing the header content of our web page. This can be part of the
page.html.twigtemplate or may reside in a region specified within our configuration file. This is commonly referred to asregion.html.twig. - Content: This is also considered a region, generally containing our main content. This can consist of multiple subcontent regions, such as nodes and comments. Nodes and comments each have their own respective templates referred to as
node.html.twigandcomment.html.twig. - Sidebar: This is also considered a region. This can contain blocks of content. Blocks are either created by the end user or by Drupal itself. The content within these blocks generally resides within
block.html.twig. - Footer: This is another region containing HTML content as well as blocks of content.
Drupal and the theme engine it uses to convert the markup and variables into HTML interpret each individual template or series of templates. We have full control over what is output using the new Twig templating engine.
Once we begin theming, we will start to see a pattern of how templates are used, and as we gain more experience, we will find ourselves using less and less templates. However, to begin with, we will build examples of each to help clarify their functionality within Drupal.
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 opening up our Drupal instance in MAC Finder or Windows Explorer and browsing to 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 located in the core/modules/system/templates folder, as shown in the following image:
If we browse the contents of the templates folder, we will see some of the most common templates we will be using including the following:
html.html.twig: HTML wrapperpage.html.twig: Page wrapperregion.html.twig: Region wrapper
Three more template folders that we need to be aware of are:
core/modules/node/templates: This contains the templates for nodescore/modules/comment/templates: This contains the comment templatescore/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 look at the 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 general HTML markup along with the Twig syntax that will output content within its place. We will take a closer look at Twig in a moment. First, we will try our hand at creating a basic theme.