Create a child theme for a WordPress block theme

Learn in this tutorial how to create a child theme for a WordPress block theme.

With the arrival of block themes in WordPress, you may be wondering: Does it still make sense to create child themes in block themes?

Let’s remember that the main reason to create a child theme is to be able to make modifications that are not lost when updating the parent theme.

That’s why it’s an interesting question, since the changes you make in the site editor are saved in the database. So that part of the modifications would not be lost when the theme is updated.

But this does not cover all scenarios. Indeed, creating a child theme from a block theme can be interesting if:

You want to directly modify files (theme.json, style.css or other HTML, PHP, or JS files)
You want to block some blocks
You want to create custom color palettes, modify spacing, apply fluid typography, add new templates or template parts…
You want to deregister patterns and/or block styles.

So, as you see, there are still several scenarios in which it can be interesting to create a child theme for a block theme.

Let’s see how you can do it.

Steps to create a child theme for a block theme

1. Create a folder with the name of the child theme

Inside the /theme/ folder add a new folder with the name of the child theme.

For example, if you want to create a Twenty Twenty-Three child theme you can choose tt3-child.

But you can name the folder whatever you want. Just use lowercase and hyphens to separate the words, good practices must be kept. 😉

2. Create a style.css file

Inside the child theme folder create a file called style.css and add the following:

/*
Theme Name: TT3 child
Template: twentytwentythree
*/

You can see that there are only two essential fields:

Template Name: Name that will be displayed on the theme page.
Template: the slug of the parent theme, in this case twentytwentythree.

If you want you can add more fields to the header, I leave here an example:

/*
Theme Name:
Theme URI:
Author:
Author URI:
Version:
*/

After these fields you can add the CSS modifications you want.

3. Create a functions.php file (optional)

This step is only necessary if the parent theme doesn’t enqueue the style.css file, as it is the case of Twenty Twenty-Three. In that case, you have to create a functions.php file and add the following:

// Enqueue style.css file
add_action( 'wp_enqueue_scripts', 'tt3_child_styles' );
function tt3_child_styles() {
	wp_enqueue_style( 'tt3-child-style', get_stylesheet_uri() );
}

4. Add a theme.json file (optional)

Create a file called theme.json in the root of the child theme.

If, for example you want to add a color palette you can add:

{
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"slug": "primary",
					"color": "#0366cc",
					"name": "Blue"
				},
				{
					"slug": "secondary",
					"color": "#F59900",
					"name": "Orange"
				},
				{
					"color": "#33333",
					"slug": "black",
					"name": "Black"
        		},
				{
					"color": "#fff",
					"slug": "white",
					"name": "White"
        		}
			]
		}
	}
}

Or if you want to remove the top and bottom spacing:

{
	"version": 2,
	"styles": {
		"spacing": {
			"padding": {
				"top": "0",
				"bottom": "0"
			}
		}
	}
}

The idea is that you customize the theme.json file to your liking.

The child theme structure would look like this:

themes
|__ tt3-child
  |__ style.css
  |__ functions.php
  |__ theme.json

The good thing is that all the customizations you have done in the previous points will be kept when you update the parent theme.

Conclusions

Now you know in which cases you may be interested in creating a child theme of a WordPress block theme and how to do it.

Any questions? I read you in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉