Week 5: Override the Main Page Template

This is Week 5 of the 7-week course Hands-On: Theming. Get started with Drupal 8 theming in 1 hour a week for 7 weeks. Based on our popular Drupal 8 Theming Workshop featured at DrupalCon.

Time to complete: About 1 hour

This week you will learn about the concept of template files and override the main page template. Go through each tutorial and then apply what you've learned in the final hands-on exercise. Be sure to complete the last tutorial listed (Exercise: Override the Main Page Template) before you move on to Week 6: Set Variables, Use Filters, and Add Classes in Templates.

Goal

  1. Understand the concept of template files in Drupal
  2. Complete Exercise: Override the Main Page Template:
    • Override the default page template file in order to change structural markup for your theme
    • Add new markup and CSS classes to Drupal's default markup

What Are Template Files?

Theming, Drupal 8
More information

Template files are responsible for the HTML markup of every page generated by Drupal. Any file ending with the .html.twig extension is a template file. These files are composed of standard HTML markup as well as tokens used by the Twig template engine to represent dynamic content that will be substituted into the HTML markup when the template is used. As a theme developer, you'll work with this a lot.

In this tutorial we're going to learn about:

Override a Template File

Theming, Drupal 8
More information

This tutorial demonstrates how to locate the template file that is currently being used to render an element and override it in your own theme. This is an important skill for anyone who wants to make changes to Drupal's default HTML markup.

In this tutorial we'll:

Determine the Base Name of a Template

Theming, Drupal 8
More information

There are many situations in which you need to know the theme hook, or base name, of a template file. This name is used for determining things like which preprocess function affects a template, and which template files are used for theming components.

In this tutorial we'll learn:

  • How to figure out the hook name for any template

Determine the hook name of a template

There are two ways to discover the hook name of a specific component. With the hook name, you can locate its base template file.

Exercise: Override the Main Page Template

Theming, Drupal 8
More information

In order to change Drupal's default markup you need to override template files. The page template controls the overall layout of your theme, including the placement of regions.

Learning objectives:

  • Understand how regions defined in an info file relate to the page template file
  • Override the default page template file in order to change structural markup for your theme
  • Add new markup and CSS classes to Drupal's default markup

Note: At the end of this exercise, you'll find a video walk-through of the solution.