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

Sign-up for weekly email reminders

Sign-up for the Hands-On Theming email list and get reminders and tips about each week's exercises!

Subscribe

Own this course

You can also purchase the Practical Drupal Theming course on Thinkific. The course material is the same, but you can access the content without a Drupalize.Me membership and you will own the course forever.

What Are Template Files?

Theming, Drupal 8, Drupal 9
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, Drupal 9
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, Drupal 9
More information

If you want to make changes to the HTML markup of any element on the page you need to first figure out the theme hook or base name of the template file used to generate it. This information is required to override the template in your custom theme.

There are other situations in which knowing the theme hook name of a template file is useful. Including determining which preprocess function affects a template, and which template theme hook suggestions can be used.

Exercise: Override the Main Page Template

Theming, Drupal 8, Drupal 9
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. You should complete the exercise just following the written instructions and you can use the video to help if you get stuck.

If you want to try and do this on your own first you'll need to: