[Install]

Install the child theme

A child theme is a theme that sits on top of another one and changes part of it. This one carries the design system and no templates, so the theme you already run keeps supplying every layout. It is the only package that also appears by name in the Styles panel, as a look you can switch on and off.

Requires a block theme on WordPress 6.7 to 7.0. Classic themes and page builders are not supported: a pattern takes its colours, spacing and type from the theme's theme.json, which is the file a classic theme does not have.

What you get

A child theme

You get a child of the theme you name: the design system, and no templates, so your parent theme goes on supplying every layout.

  • theme.json
  • style.css
  • functions.php
  • styles/pattern-paste.json
  • styles/section-paper.json
  • styles/section-ink.json
  • styles/section-accent-1-tint.json
  • styles/section-accent-2-tint.json
  • styles/section-accent-3-tint.json
  • styles/section-accent-4-tint.json
  • styles/section-accent-5-tint.json
  • styles/section-accent-6-tint.json
  • README.md

13 files, 45.1KB unpacked, listed by building the package this page installs. Your own download carries the same files with your colours and type in them.

Before you start

A child theme is a child OF one named theme, so the tool has to be told which. Find the folder name of your active theme first: Appearance → Themes, press the active theme, and the folder name is the last part of the address bar, or look in wp-content/themes/ over FTP. It is lower case, with hyphens, like twentytwentyfour. Type it into "Your theme’s folder name" on the theme tool, then press the child theme download.

The steps

  1. In your site’s admin, open the left-hand menu and go to Appearance, then Themes.

  2. Press "Add New Theme", then "Upload Theme".

  3. Press "Choose File", pick the .zip you downloaded, and press "Install Now".

  4. Press "Activate". The site keeps its templates: they are still coming from the parent theme.

  5. Go to Appearance → Editor → Styles and press "Browse styles". The design system is listed there by name; press it to apply it, and press another to take it off again.

Where it appears afterwards

  • Appearance → Editor → Styles → Browse styles lists the design system by name, beside the ones the parent theme ships.
  • In the block editor, select any Group block and open the Styles tab. The 8 sections are listed there.
  • Appearance → Themes shows the child as the active theme, with the parent named under it.

What to know

  • It is a child of ONE theme. Change parent theme and you need a new child built from this page.
  • The parent must be installed, or WordPress refuses the upload with "The parent theme is missing".
  • If WordPress says "The parent theme is missing", the folder name was wrong or that theme is not installed on this site. Install the parent first, or check the spelling, and build the .zip again.
  • Change your parent theme later and this child stops matching it: build a new one from the tool with the new folder name.

Which other route

If you would rather not be tied to one parent theme, or you want the templates too:

Back to the theme tool