[Install]

Install the files by hand

No package and no uploader: theme.json and one small JSON file per section, copied straight into the folder of the theme you already run. Take this route only if you are comfortable moving files over FTP or in your host’s file manager, and only if you have a backup.

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

theme.json and the section partials

You get theme.json and one styles/section-*.json per section, to copy into your active theme's folder over FTP or your host's file manager.

  • theme.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

10 files, 36.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

Download the files .zip from the theme tool and unzip it on your own computer. Inside are theme.json and a styles folder holding one file per section.

The steps

  1. Connect to your site over FTP or SFTP, or open your host’s File Manager, and go to wp-content/themes/.

  2. Open the folder of your active theme. If you are not sure which it is, Appearance → Themes names it.

  3. DOWNLOAD A COPY of the theme.json already in there and keep it somewhere safe. This is the step you will want back.

  4. Upload the new theme.json into that folder, replacing the one there.

  5. If the theme has no "styles" folder, make one. Upload the 8 section files into it.

  6. Reload the site. The palette is in force and the sections are registered.

Where it appears afterwards

  • Appearance → Editor → Styles shows the palette, because it is now the theme’s own theme.json.
  • In the block editor, select any Group block and open the Styles tab. The 8 sections are listed there.

What to know

  • It overwrites your theme's own theme.json, which is where that theme states its palette, its widths and its type. Keep a copy first.
  • Your theme's next update removes it, silently: updating replaces the whole folder. The child theme is the answer to that.
  • This package cannot load webfonts. Loading a webfont is a line of PHP and there is no PHP here, so a family this design system names is only what a visitor sees if the theme, or a plugin, already loads it. Every other route loads them.
  • There is no undo but the copy you took in step 3.

Which other route

Every other route survives a theme update, and three of the four load the fonts:

Back to the theme tool