The Underscores (_s) starter theme, introduced in 2012, is designed for developers with a 1000-hour head start on best coding practices. Prior to the introduction of Twenty Twenty-Two block theme in 2022, all WordPress default themes were based on the _s theme.
Just like the underscores for classic themes, the Create Block Theme (CBT) plugin is a similar tool for block themes. At the writing, the current v1.13.4 version of the CBT plugin has two features: create block themes and manage theme fonts. In WordPress 6.5, the later feature is expected to be merged into the Core as a new Fonts Library feature.
With the CBT plugin installed and activated, you can use it to create block themes directly from your wp-admin dashboard.
Without writing any code or touch a template file, you can:
- clone a theme
- add style variations to your theme
- rewrite your Global Styles customizations
- or create a child or blank theme
The CBT plugin is the only tool to create different variations of block themes directly from the Site Editor. The short video “Streamline your Block Theme development with Create Block Theme on Learn.WordPress.org. gives a brief overview of all the options. In this article, you will take a tour of the plugin focusing on particular use cases.
Table of Contents
Site setup
Let’s begin by setting up a test site, if you haven’t already done so. In this example, the local setup includes some dummy test data and a CBT plugin installed and activated. It has a blank theme called Emptytheme that has been renamed to “EMPTY-CBT” with minor modifications.
Customizing block themes
You can customize your block theme as you prefer. Make your preferred changes using the Global Styles interface or with a theme.json file.
This article assumes that you are familiar with using the Site Editor Global Styles interface and creating block themes.
For this article, the following changes were made:
- add few basic layout changes for the home page
- add a page template and a footer part
- add a navigation
Below, the screenshot shows an EMPTY-CBT file structure and index.html template markup.
The WordPress site editor provides an export theme feature, that includes theme.json file and the style variations.
Let’s explore the feature and find out how it differs from the CBT plugin.
Using WordPress Site Editor export feature
In the Site Editor you find the Export feature via the more (three vertical dots) menu in the Tools section.
The exported file contains all the custom edits and style changes and downloaded as zip file in your download folder.
The WordPress 6.0 Dev Note Theme export in WordPress 6.0 describes the process of exported block themes under the surface.
- The export tool copies all the files from the current active theme into a zip file. Then it checks the database for any changes in templates and
theme.jsonfiles, extracts all the changes and overwrites files with the same name. - For security reasons, some changes in the template files are sanitized. For example, the following CSS variable:
--wp--custom-spacing--outerbecomes\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002douter. - The
theme.json: properties will be sorted alphabetically. The schema may also be updated to match with the current WordPress version of the site.
How to use the Create Block Theme plugin
If you have not already installed it, install and activate the Create Block Theme plugin from the WordPress plugin repository.
If you click Appearance in the admin dashboard, there are two buttons: Create Block Theme, and Manage theme fonts. This article focuses on the Create Block Theme option.
When the Create Block Theme button is selected, the plugin allows you to create an entire theme, child theme, or a theme style variation without writing any code or ever having to touch template files.
Now, let’s turn to the Export option of the plugin.
Option 1. Export option
Similar to the export feature of WordPress site editor, this option also allows exporting the active theme with user changes.
To test this feature, use the same setup that was described in the previous section without any changes.
The file structures of the themes exported with the WordPress plugin and site editor were exactly the same, containing the same code. This feature is useful when you would like to use a customized theme as an independent theme or deposit in the theme directory. It requires updating theme name and theme metadata (discussed later in this post).
Option 2: Create a clone of the activated block theme
From the Appearance > Create Block Theme and select Clone EMPTY-CBT option, it will display the following form. Only the Theme Name field is required, all other fields are optional.
This feature creates a new copy of the activated theme with users changes. The cloned theme will have all the assets of the activated theme combined with the user’s changes.
The cloned theme will be downloaded to your themes download folder. If you have activated it, you will notice that your uploaded screenshot.png file overwrites its original placeholder screenshot image.
If you check its files and folders, they are the same as the currently activated theme with your customized changes. Its style.css file contains the meta fields that you entered, and other fields, if not filled, are shown as blank.
The text domain field correctly displays emptycbtclone name, but the tags field is inherited from WordPress. There is a GitHub ticket to add theme tags to the exported style.css file.
Option 3: Create a child theme
Child themes are useful when you want only a little customization and want to keep using the parent theme with future updates. If you are new to creating a block child theme, the Block themes documentation contains detailed instructions.
Before using the Create child theme option, change its background color to Luminous vivid orange (#FF6990) and the link color to white.
Then fill out the form with the name of the theme, other meta fields and a screenshot image. The following screenshot shows the newly created EXPTY-CBT-CHILD child theme, which has been activated on a test site example.
This option creates a child theme with three files: readme.txt, empty style.css and theme.json; a folder: parts/header.html and the screenshot.png image.
The style.css file contains the meta information that was entered while creating the child theme.
/*
Theme Name: EMPTY-CBT-CHILD
Theme URI:
Author:
Author URI:
Description: This is demo child theme of EMPTY-CBT block theme.
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.7
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: emptycbt
Text Domain: emptycbtchild
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks
*/Option 4: Overwrite the active block theme
For testing the overwriting option, let’s use the EMPTY-CBT theme and make some changes using its Global Styles interface.
From Appearance Editor select the blue Edit button. When you press the top Styles (half-moon) button, it will expose the appearance panel. Now select Colors button change its background color to Black (#000000), and Post Title to Luminous vivid amber (#FCB900) and Save the changes.
If you visit the Manage all templates panel (Design Templates Manage all templates), you will notice the following screen.
Do you notice Blue dots in our Page and Single template above? They indicate that these two templates have been modified. There is an Options button (three dots) to Clear customizations, if desired.
Any changes made and saved in the Site Editor are stored in the database which is lost when we change our theme. These kinds of user changes are not reflected in the theme’s template or template parts markup.
This overwrites option is really handy, if you were to save a customization permanently in the current theme. Both styles could be preserved using the Style Variation option, which will be explored in the next section.
Note: Caution! Once overwritten, you can’t revert your changes from the Site Editor, but only by updating your code editor manually or repeating the customization again.
Now, let’s select the Overwrite option and press the Generate button. The following notice will be displayed.
If we check the theme.json file, our earlier modifications are appended to the styles section. Likewise, if you were to check the lists of templates, the blue dots are cleared.
This is the entire theme.json file
{
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "650px",
"wideSize": "1000px"
},
"typography": {
"fontFamilies": [
{
"fontFace": [
{
"fontFamily": "Inter",
"fontStyle": "normal",
"fontWeight": "300",
"src": [
"file:./assets/fonts/inter_300.ttf"
]
},
{
"fontFamily": "Inter",
"fontStyle": "normal",
"fontWeight": "900",
"src": [
"file:./assets/fonts/inter_900.ttf"
]
},
{
"fontFamily": "Inter",
"fontStyle": "normal",
"fontWeight": "400",
"src": [
"file:./assets/fonts/inter_regular.ttf"
]
}
],
"fontFamily": "Inter",
"slug": "inter"
},
{
"fontFace": [
{
"fontFamily": "Open Sans",
"fontStyle": "normal",
"fontWeight": "400",
"src": [
"file:./assets/fonts/open-sans_normal_400.ttf"
]
}
],
"fontFamily": "Open Sans",
"slug": "open-sans"
}
]
}
},
"styles": {
"color": {
"background": "var:preset|color|black",
"text": "var:preset|color|cyan-bluish-gray"
},
"elements": {
"link": {
"color": {
"text": "var:preset|color|luminous-vivid-amber"
}
}
},
"typography": {
"fontFamily": "var:preset|font-family|inter"
}
},
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json"
}
When you browse the front end of your site, you will notice that the customization has been applied.
Option 5: Create style variation of active theme
A recent update separates styles and template variations and preserves any changes made in the theme template files.
The Style Variation feature of the Block theme is one of its most powerful features. The Twenty Twenty-Three theme was entirely designed using style variation. Read more about it in the Theme Handbook.
In the earlier sections of this article, you created two variations: a vivid orange and black background as a child theme and overwrite options.
For testing the Style variation option, in this use case, I recreate the same styles as Style variation of the original theme. This option allows switching between the white (original), red and black background styles without modifying the original theme style or creating a new child theme.
Using the template editing mode of the Site editor, I recreated the original white background and black contrast color and saved the styles.
I wanted to create this as my “white” variation. When the Create style variation option of the plugin is selected, it requires us to enter the variation name.
Similarly, I also re-created the Luminous vivid orange (#FF6900) background style that we had created in the Create Child Theme section and saved as a vivid orange style variation.
After creating “white” and “vivid orange” as my two style variations, if you check your EMPTY-CBT folder, a new /styles/white.json file with your selection has been created.
Go back to the Site Editor’s template editor mode (Appearance Editor Design) and select the Template Edit (Blue) button, then select Styles (top right) Browse Styles button, all three styles you created are displayed.
The style variation feature allows you to create any number of style variations of a theme, without writing a line of code. Now, you can switch between the variations of your site.
Finally, let’s explore the Create blank theme option.
Option 6: Create a blank theme
To use the Create blank theme option, complete the same form that used previously in the Clone and Child-theme options. For my test, I entered EMPTY-BLANK as the only required field.
A blank theme is downloaded in the active theme’s folder with the following message:
The following screenshot shows the newly created EMPTY-BLANK theme that is activated on my test site. As I had not included a screenshot image, it included the CBT plugin screenshot image instead.
The following is the file structure of the EMTY-BLANK theme, with a starter theme.json file with system fonts and defined header and footer template parts.
The theme folder includes readme.txt, screenshot.png, styles.css, and three template files.
The /parts folder includes header.html and footer.html templates, and the /templates folder contains a similar starter index.html template file.
/*
Theme Name: EMPTY-BLANK
Theme URI:
Author:
Author URI:
Description: This is demo empty-blank theme with current active EMPTY-CBT theme.
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.7
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template:
Text Domain: emptyblank
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks
*/How to share your exported theme
The exported theme can be submitted to WordPress theme repository, after completing some updates, which are listed in the WP 6.0 Field Guide:
- Screenshot.
- The
readme.txtfilechangelogentries, if any. - Version number of the theme in
style.css. - Update the theme name in all relevant files.
- Add the required license file, if it’s not included.
- Then re-zip the files and submit the new zip file to https://wordpress.org/themes/getting-started/.
Note: Please review the Theme Handbook for the latest submission guidelines.
Eventhough an emptytheme example was included in this guide to demonstrate how powerful the Create Block Theme plugin is for block theme developers, you can integrate this plugin into your development workflow using any block theme from the WordPress theme directory.
Some options work similarly (e.g., export, clone, overwrite), but you can still use the most suitable option for you in your workflow.
Resources to learn more
- Block themes (Theme Handbook)
- WordPress/create-block-theme (GitHub)
- Creating new themes using the Site Editor (Theme Handbook)
- WordPress TV/create-block-themeUsing Create Block Theme (WordPress TV)
- Streamline your Block Theme development with Create Block Theme (Learn WordPress)
Props to @bph and @webcommsat for reviewing this article and to @greenshady for inspiration.
Leave a Reply