WordPress & Full Site Editing: How to Create a Child Theme & Block Theme

When to Use a Child Theme for WordPress

A child theme is essential if you plan to make any custom changes to the code of a WordPress site. By using a child theme, any updates to the parent theme will not overwrite your customizations.

Traditionally, creating a child theme involved copying the functions.php and style.css files and enqueuing the child theme to the parent theme. However, with Full Site Editing (FSE) and its different file structure, adjustments are needed to ensure all necessary files are accessible.

Fortunately, the Create Block Theme plugin by WordPress.org makes it easier than ever to create child themes, custom themes, or style variations.

Setting Up the Create Block Theme Plugin on WordPress

First, install and activate the WordPress block theme that will serve as the basis for your new theme or child theme. For this example, we’ll use the Twenty Twenty-Two theme.

Steps to Install the Plugin:

1. Navigate to Plugins > Add New.
2. In the search window, find "Create Block Theme."
3. Click Install and Activate.

With the plugin installed, you’ll find new options under Appearance, including Create Block Theme and Manage theme fonts.

Creating a WordPress Child Theme

The Create Block Theme plugin simplifies the process of creating a child theme for any block, including a Full Site Editing theme. It automatically creates the necessary folders and files such as parts, templates, theme.json, and style.css.

Steps to Create a Child Theme:

1. Under Appearance, select Create Block Theme.
2. Choose Create child of Twenty Twenty-Two (or the theme you selected).
3. Fill in the theme details on the right: Theme Name, Theme Description, Theme URI, Author, and Author URI.
4. Click the blue Generate button to create the child theme.

Your child theme will be exported as a zip file. To implement it:

1. Go to Appearance > Themes, click Add Theme and Upload Theme.
2. Upload the generated zip file and activate your new child theme.

Creating a Custom Image for a WordPress Child Theme

The plugin doesn’t allow adding a screenshot.png for the child theme or using the one from the parent theme. You can easily add a custom screenshot:

1. Create a new image that is 1200px by 900px, and name it screenshot.png.
2. Place this image inside the folder of the child theme you created.

Navigate back to themes, and your new image should appear with your child theme.

Creating a Custom Block Theme on WordPress

The Create Block Theme plugin also allows you to create custom themes. You can clone an existing theme and make your changes or create a blank new theme using the current theme as a boilerplate.

Steps to Create a New Theme:

1. Under Create Block Theme, select Create blank theme.
2. Fill in the information, such as the name and your details.
3. Click Generate to download your new theme as a zip file.
4. Upload and activate your new theme under Appearance > Themes.

Build out your new theme using patterns, blocks, template parts, and the styles editor. Once complete, you can export the new theme to use on other sites.

Managing WordPress Theme Fonts

The Create Block Theme plugin makes it simple to add or remove fonts for your theme, whether they are Google fonts or local fonts.

Adding Google Fonts:

1. Click Add Google Font.
2. Select the font from the dropdown list, check the checkbox, and add it.

Adding Local Fonts:

1. Click Add Local Font.
2. Upload the font file, fill in the font details, and add it to your theme.

WordPress Child Themes Made Easy

With Full Site Editing and the Create Block Theme plugin, creating custom themes and style variations is more accessible than ever. This plugin simplifies the process of creating child themes and adding new fonts, eliminating the need to manually change code.

Using patterns, style variations, and reusable blocks with the plugin allows for easy custom theme creation that can be exported and reused without touching the theme code.

More Resources:

• How To Create A Custom 404 Page In WordPress
• How to Choose the Best WordPress Theme for SEO
• Advanced Technical SEO: A Complete Guide

Featured Image: Kaspars Grinvalds/Shutterstock