[Install]

Install the theme

The whole block theme, as one .zip. WordPress installs it the way it installs any theme, and from the moment you activate it the site is this design system: palette, type, spacing, sections, header, footer and every template.

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

The whole theme

You get a complete block theme: templates, header and footer, the palette and every section.

  • theme.json
  • style.css
  • functions.php
  • templates/404.html
  • templates/search.html
  • templates/archive.html
  • templates/single.html
  • templates/page.html
  • templates/home.html
  • templates/index.html
  • parts/header.html
  • parts/footer.html
  • 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

21 files, 46.5KB 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

You need the .zip. On the theme tool, under the question "Where is this design system going?", choose the first answer and press its download button. Your browser saves one file. Do not unzip it: WordPress wants the .zip itself.

The steps

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

  2. Press "Add New Theme" at the top of the page, then press "Upload Theme".

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

  4. WordPress unpacks it and says the theme was installed successfully. Press "Activate".

  5. Open the site in another tab. It is wearing the design system you built.

Where it appears afterwards

  • Appearance → Editor → Styles shows the palette: the 8 colour roles this design system defines, plus the ones every theme has.
  • In the block editor, select any Group block and open the Styles tab in the right-hand sidebar. The 8 sections are listed there by name.
  • Appearance → Editor → Templates holds this theme’s templates, which are now the ones the site uses.

What to know

  • It replaces the active theme, so any templates that theme gave you are no longer in use.
  • The .zip is built in your browser from the design on the canvas. Nothing is uploaded to us, and there is no copy of it anywhere else: keep the file, or keep the design saved in the tool.
  • It is a whole theme, so it brings its own header, footer and templates. If you like the ones you have, you want the child theme or the plugin instead.

Which other route

Do you actually want to keep the site you have? Then one of these is the better route:

Back to the theme tool