In this post, I will show you how easy it is to create a child theme of a block theme, compared to creating a child theme of a classic theme, which requires PHP coding knowledge. The theme that I am going to customize is the beautiful Poe theme created by Anders Noren. In this child theme project, I will create light and dark style variants, and add font families of our choice. To accomplish these tasks, I will use the powerful and handy Create Block Theme plugin, along with some manual modifications to the theme.json file.

Table of contents

Creating light & dark style variations

• Install & activate Poe
• Install & activate Create Block Theme plugin
• Make color palette modification of Poe in the Global Styles editor
• Save the modification as a child theme of Poe by going to Appearance > Create Block Theme > select Create child of Poe. Type in the name and the necessary information in the respective fields. For this project, I named the child theme Pochi. This process will automatically result in the creation of the theme .zip file.
• Upload & activate the resulted child theme by going to Themes > Add New > Upload Theme

The image below shows the newly activated child theme. Notice that its layout is bleeding to the edge of the window. This is because Poe uses a separate style.css file in addition to a theme.json file to render its style. So we need to copy that style over to our child theme folder.

To copy the style sheet, we need access to the site’s file folder. Depending on your development environment (hosted or local), the interface will vary.

1. Go to Poe folder > style.css > Select everything but Poe’s theme description.
2. Copy that over to the child theme’s style.css
3. Refresh or hard refresh your browser to view the result.

The light theme above will be the default style, and we want to create its darker counterpart. To do that, we will need to modify the default color palette in the Global Styles editor, and save the changes as a style variation using Create Block Theme plugin again. After adjusting & saving the color palette, go to Appearance > Create Block Theme > select Create a style variation > then give the style a name.

The dashboard will show a message that “Your variation of [name-of-child-theme] has been created successfully. The new variation file is in /home/sijad***/public_html/wp-content/themes/pochi/styles/dark.json”

We will then see the light and dark styles variations under Global Styles editor.

Adding & registering new fonts

After we’re done adding style variations, we’d like to replace the default font with our own choice. To have this typography option, we need to register the fonts first. However, unlike modifying styles, registering a new font family is not as straightforward as editing a color palette. As far as I know, and as of this writing, we can’t register font families directly in the Global Styles editor.

Updates: Font Management has been included in Gutenberg 16.7 and slated for WordPress 6.5. https://make.wordpress.org/test/2023/10/03/help-test-the-font-library/

To accomplish this task, you need to edit the theme.json file of the child theme and manually upload the necessary font files. For this project I use the regular size of Fractul and Josephin Sans fonts. You may want to use the .woff2 format if you only want to support newer browsers. Unfortunately, not all fonts provide the .woff2 format. But since Josephin Sans is a Google Font, we can use a converter like Google webfonts helper, to get its .woff2 file.

After we get the necessary font files, we need to create subfolders /assets/fonts under folder /themes/pochi, and upload the fonts to that directory.

Now we need to list those fonts in our child theme’s theme.json, by putting them under settings.typography.fontFamilies section.

"settings": {
	"typography": {
		"fontFamilies": [
			{
				"fontFace": [
					{
						"fontFamily": "Josefin Sans",
						"fontStretch": "normal",
						"fontStyle": "oblique 0deg 10deg",
						"fontWeight": "100 900",
						"src": [
							"file:./assets/fonts/josefin-sans-v25-latin-regular.woff2"
						]	
					}
				],
				"fontFamily": "Josefin Sans",
				"name": "Josefin Sans",
				"slug": "josefin-sans"
			},
			{
				"fontFace": [
					{
						"fontFamily": "Fractul",
						"fontStretch": "normal",
						"fontStyle": "oblique 0deg 10deg",
						"fontWeight": "100 900",
						"src": [
							"file:./assets/fonts/Fractul-Regular.woff2"
						]
					}
				],
				"fontFamily": "Fractul",
				"name": "Fractul",
				"slug": "fractul"
			}
		]
	}
}

The editing of theme.json as described above will give us this font options menu in the Global Styles editor to select from.

That’s it! If you want to get the child theme files, you can get it here.