In this article, I’ll be showing you a very easy method for creating child themes when using WordPress Block Themes.
Block Themes Quick Overview
With the introduction of WordPress 6.0, the WordPress team has gone all-in on Block Themes to make it easier than ever to design and customize websites with little to no coding. Block Themes utilize the “Block Editor,” also known as the “Gutenberg Block Editor,” to allow users to drag and drop design elements onto a webpage. This feature makes WordPress much more competitive with site builders and theme builders, especially since WordPress is totally free and already used by over 60% of the top 10 million websites on the internet.
One of the latest benefits of Block Themes is the ability to easily create a new child theme for whatever Block Theme you’re using to design your website. For example, if you’re using the default TwentyTwentyThree theme that ships with WordPress 6.2, you can quickly create a child theme for it without needing to dive into your site files using an FTP client.
Why Child Themes Are Important
Child themes are important because they allow you to customize your theme and keep those customizations whenever theme updates are available. Without a child theme, your site customizations may be overridden every time you update your “parent” theme – in this case the TwentyTwentyThree theme. This means that at best you’ll need to go back and re-insert your customizations one by one after each theme update, and at worst you may lose all your customizations upon updating and will need to start over.
Child themes separate your customizations from the default parent theme, so you can update your parent theme AND keep all your customizations that are contained within the child theme. You get the best of both worlds.
Create a Child Theme for Your Block Theme
Now that some of you are sufficiently annoyed at me for explaining why you need child themes, let’s get into how to actually create these child themes when working in WordPress in 2023.
For starters, log in to your WordPress Dashboard and navigate to Plugins>Add New (red arrow in the image above).
This method uses a plugin developed directly by the WordPress team. This means the plugin has been optimized to work with the latest version of WordPress and block themes.
From the “Add Plugins” work area, search for the “Create Block Theme” plugin using the search bar (outlined in green in the image above, towards the top right). Once you see the plugin listed in the Search Results, click “Install Now” (red arrow).
Once the plugin has finished installing, the “Install Now” button will turn blue and say “Activate.” Click the “Activate” button (red arrow in the above image).
Once the plugin is successfully activated, you’ll be taken to the “Plugins” work area of WordPress and will see a message that says “Plugin activated” towards the top (green arrow in the above image). From here, navigate to Appearance>Create Block Theme (red arrow).
Once inside the “Create Block Theme” work area, select the “Create child theme of Twenty Twenty-Three” radio option (or whatever the name is of the theme you are creating a child theme for – red arrow in the image above).
A bunch of text boxes will appear on the right-hand side of the window. Only the topmost text field, labeled “Theme Name” (blue arrow), is mandatory. The rest are all optional. For your theme name, it is standard practice to name your child theme “TwentyTwentyThree-child” if your parent theme is called “TwentyTwentyThree,” for example.
I also happened to add a brief description in the “Theme Description” field, plus added my business name under “Author” and my main website under “Author URI.” Everything else I left at their default values (including the check boxes you’ll see when you scroll further down the page).
Click the “Generate” button (green arrow).
This will automatically start a download of a zip file containing your child theme. You can keep the filename as it appears (red arrow in the above image). Click “Save” to save the file to your computer (blue arrow).
A zip file will be downloaded to your computer. In the downloads bar at the bottom of your browser, click the arrow next to the finished download (green arrow) and click “Show in folder” (red arrow) to bring up the downloaded zip file in your File Explorer window (if you’re using Windows – on MAC, bring up the download in your File Explorer).
Keep this File Explorer window open and the zip file that contains your child theme selected (green arrow) – we will need this in an upcoming step.
Return to WordPress and navigate to the “Themes” section under Appearance (red arrow in the image above). Click the “Add New” button towards the top of the Themes work area (blue arrow).
In the “Add Themes” work area, you’ll see a box in the middle of the window with a button labeled “Choose File” (red arrow). You can either click this button and select the zip file we just downloaded for the child theme, or open the File Explorer window we navigated to earlier and drag and drop the zip file anywhere inside this box.
In this photo above, you can see I dragged the zip file directly over the box and released my mouse.
You’ll now see your twentytwentythreechild.zip theme file listed inside the box (green arrow), and an “Install Now” button appears (red arrow). Click “Install Now” to begin the installation of the child theme.
You’ll be taken to a new window and your child theme will begin installing to your site. Give the installation some time and don’t refresh the page while it’s installing (it can break your site). Once the child theme install has completed, you’ll see a message stating “Theme installed successfully.” (outlined in green in the above image).
Below this success message is a link labeled “Activate.” Click this link to activate the child theme on your site.
Once the theme is successfully activated, you’ll be taken back to the “Themes” work area. A message will display on the top that reads “New Theme activated. (outlined in green in the above image). You’ll see the first theme listed is now what appears to be a blank theme – denoted by the checkerboard background, which usually represents transparency in the design world. At the bottom of this theme preview you’ll see it says “Active: TwentyTwentyThree-child” (red arrow).
This means you have successfully installed a child theme! The transparent theme preview represents the fact that your child theme only holds theme customizations, and all the other styling and design elements are displayed in the parent theme (in this case the “TwentyTwentyThree” theme). Make sure you do not delete the parent theme as this will screw up your site. Additionally, make sure you keep the parent theme up to date (for security reasons) by clicking any update links/notifications that appear for the theme.
You can preview your current site with the child theme enabled by clicking the “Visit site” link that appears in the success message (blue arrow in the image above).
In this case, you’ll see my site simply displays as the default TwentyTwentyThree theme (my parent theme – I did not make any changes to the TwentyTwentyThree theme before I started this tutorial). That means the child theme has successfully installed!
That’s it for this tutorial. You can check out my other WordPress help articles on my site, or take a deeper dive into WordPress with my WordPress for Beginners 2023 – No Code WordPress Masterclass.
