How to create a Drupal 8 sub-theme

As the name suggests, Drupal 8 sub-themes are very closely related to standard Drupal themes. They work in a similar way to standard themes, with one exception – they inherit the parent theme’s resources. A sub-theme is a child of its parent theme – in fact, you can chain themes so a sub-theme can be a child of another sub-theme, that acts as its parent, with resources passed down the chain.

To create a sub-theme, it must be defined, like any other theme and declared using the base theme key.

Example of a sub-theme file and folder structure

When you create a sub-theme, its file and folder structure will resemble the following:

themes \
       + pixelnine\
                  + pixelnine.info.yml
                  + pixelnine.libraries.yml

The info file is named pixelnine.info.yml (you can name your theme whatever you wish, just replace pixelnine with your own choice throughout) and contains the following code:

name: Pixelnine
type: theme
description: This is a sub theme of Basic
core: 8.x
# Defines the base theme
base theme: basic
# Defines libraries group in which we can add css/js.
libraries:
- pixelnine/global-styling
# Regions
regions:
header: Header
featured: Featured
content: Content
sidebar_first: First sidebar
sidebar_second: Second sidebar
footer: Footer

Include a pixelnine.libraries.yml file to add css/js in the global-style group (this is defined above, in the libraries key). Use the following code:

global-styling:
css:
component:
css/style.css: {}

Nesting sub-themes

When creating a sub-theme as a child of another sub-theme, the info file must define the sub-theme being extended as the base theme.

For example:

name: Pixelnineplusone
type: theme
description: This is a child sub theme of Pixelnine
core: 8.x# Defines the base theme
base theme: Pixelnine

 

If you notice any problems or if you need any help, please open a new support ticket from your HostPapa Dashboard. More details on how to open a support ticket can be found here.

Was this article helpful?

  • Was this article helpful ?

  • yes   no

Related Articles

Leave A Comment?