Making a Theme Configurable

In this chapter, we’ll talk about configurations.

Suppose we’re developing a theme for a single website. In that case, we probably don’t need to make it configurable, but if we plan to reuse it or use it as a base theme, adding some configurations can improve the reusability of the theme itself.

First of all, we will learn how to define configurations and how to use them. Then, we’ll discover how sub-theming works in Drupal and how configurations are inherited from a parent theme.

The topics covered in this chapter are as follows:

• Creating a theme settings form
• Using theme settings in Twig and JavaScript
• Sub-theming

Technical requirements

To run the examples in this chapter, make sure to follow the instructions explained in Chapter 1, Setting Up a Local Environment.

You can find the code for this chapter in the GitHub repository: https://github.com/PacktPublishing/Modernizing-Drupal-10-Theme-Development.

Creating a theme settings form

Sometimes, you may need to build a generic theme that can be used on different websites, with some minor adjustments. A typical example can be the departments of a university – their websites must be consistent, both in content structure and layout, but they may have some peculiarities. For example, some departments may have a specific Facebook page, whereas others may point to a generic page of the university.

As we saw in Chapter 2, Setting a New Theme and Build Process, every theme has a configuration form where you can set which logo or favicon to use and which page elements to render:

Figure 13.1 – Theme settings for the Alps Trips theme

The settings you can configure with this form (which is located at /admin/appearance/settings/alps_trips) are very generic and (apart from maybe for the logo and the favicon) not very useful.

In Chapter 5, Styling the Header and the Footer, we left some hardcoded...

Using theme settings in Twig and JavaScript

The demo website uses the copyright notice and the social links in the footer region.

Figure 13.3 – The footer of the demo website

We can update alps_trips_preprocess_region from the alps_trips.theme file to use values from the configuration, instead of hardcoding them:

function alps_trips_preprocess_region(&$variables): void {
  if ($variables['region'] == 'footer') {
    ...
    $variables['copyright'] =
      theme_get_setting('copyright');
    $socials = [];
    if (theme_get_setting('twitter')) {
      $socials[] = [
        'url' => theme_get_setting('twitter'),
        'svg' =>...

Sub-theming

In Drupal, sub-theming refers to the process of creating a new theme that inherits and extends the functionality of an existing base theme. It allows you to customize the appearance and behavior of your Drupal site without modifying the base theme directly. Sub-theming is a powerful technique that enables you to build unique designs while benefiting from the updates and improvements made to the base theme.

The inheritance chain follows a linear path, and each theme can only have one parent theme. The visible markup presented to the user on a page is the outcome of how each theme in this chain modifies the markup received from the preceding theme, with the active theme having the ultimate authority in determining the final markup.

Imagine, for example, that our Alps Trips company became successful, and we opened a French office to manage tours in the French Alps. We want a site with the same content types and configuration but with some differences on the frontend...

Summary

In this chapter, we discussed a theme’s configuration, how to add a form to input it, and how to use it in Twig and JavaScript files.

Configuring a theme is way more helpful when we create a set of sub-themes from a parent one, and in the last section of the chapter, we saw how to define a sub-theme and which information is inherited from the parent one.

However, a beautiful and catchy theme may not be useful if it’s not performant and accessible, so in Chapter 14, Improving Performance and Accessibility, we’ll discuss those two essential requirements.