Streamline your Block Theme development with Create Block Theme

Learn how to use the Create Block Theme plugin to streamline your Block Theme development processes.

Learning outcomes

1. How to install the Create Block Theme plugin
2. How to create a blank theme
3. How to overwrite an existing theme
4. How to clone a theme
5. How to create a child theme
6. How to create a style variation
7. How to export a theme

Comprehension questions

1. What are the six main theme generation tools in Create Block Theme?
2. Where does Create Block Theme generate any style variations?
3. Which option would you use when you’re ready to shop your block theme?

Video Transcript

View Transcript

Hey there, and welcome to Learn WordPress.

Today you’re going to learn about a handy plugin in the WordPress plugin repository that will streamline your block theme development called Create Block Theme. After a short introduction to Create Block Theme, we will cover how to install it on your WordPress site and go over the main features that the Create block theme plugin provides.

Create Block Theme works in conjunction with the Site Editor to allow you to create and edit block themes right from the WordPress dashboard. Whether you’re developing your new theme on top of a base theme, or starting a brand new block theme from scratch, you will find Create Block Theme very useful. Once installed Create Block Theme provides a series of features that streamline your block theme development process, from creating a blank theme all the way to exporting the current theme to an installable zip file. Additionally, Create Block Theme also allows you to add Google fonts or local fonts to your theme. We will cover this in a separate tutorial.

You can install Create Block Theme through the plugins page of your WordPress installation. First, navigate to the list of plugins then click on the Add New button in the search box on the top right, search for create block theme. This will search the wordpress.org plugins repository. Once the plugin is found click on Install Now to install it. After it’s installed click Activate to activate it in your WordPress install. Once activated the Create Block Theme submenu will appear under the Appearance menu in the dashboard.

Alternatively, you can also search for Create Block Theme in the WordPress plugins directory at wordpress.org/plugins.

To install it, download the plugin zip file and install it manually through the Add new plugin screen.

Create Block Theme gives you the following options for block theme development.

First, we will look at creating a blank theme. This option allows you to start a new block theme from scratch. When you select this option you will be prompted to add the following details about the new theme. The theme name, the theme description, the theme URI, the theme author, and the author URI. Of these fields, only the theme name is required to create a blank theme as it’s needed to create the theme directory. Once you add the relevant details and click generate the new theme will be created. You can then navigate over to the themes list view your new theme, see its details or activate it.

Once it’s activated, you can edit it in the site editor and make the changes you need for your new theme development project.

If you take a look at the theme directory in a file browser or a code editor, you’ll see it’s created the required style.css and an index.html template.

It also contains a theme.json to manage global styles, a readme.txt file that’s used for the wordpress.org theme repository, and Header and Footer template parts.

During development, it’s often useful to make small changes in the Site Editor and then store those changes in the theme file system. One reason for this could be that you want to save these incremental changes to a revision control system like Git or Subversion. This is where the Overwrite theme option becomes handy. For example, let’s say you created a blank theme and added a single template to the template list.

The template itself just contains the header and footer parts, a post title, post featured image, and post content. Then you decide to change the global styles of the theme. Changing the background color, text, color, and color of the links to create a dark theme effect. In this case, you’re using the following colors, a dark color for the background, and the light green colour, and light purple color for the text and links. When these changes are saved, they will be stored to the database for the site. However, you would prefer to write these changes to the theme files. You can now use the Overwrite option of Create Block Theme by selecting it and clicking generate

This option will take all the changes saved in the database and write them to theme files. In this case, it will create the single HTML template in the templates directory and update theme.json with the color changes.

Here we can see the single templates. And if we look at the theme.json the background text and link color has been applied.

Sometimes, you might want to create a clone of the currently active theme to test something out. This is where the Clone theme option is handy. For example, let’s say instead of writing the dark theme colors to the current theme, you wanted to create a separate copy of the theme with the changes saved to the database. Using the clone option of Create Block Theme will ask the same questions as when creating a new theme.

However, once you enter the new values, it will create a copy of the active theme, including all the changes you’ve saved in the editor. This clone will be exported as an installable theme zip file, which you can install either on your local site or on another WordPress site.

The option to create a child theme is handy when you’re building a site using an existing block theme from the wordpress.org theme repository, but you only need to apply a few small customizations. Just like a child theme for a classic theme, adding your customizations to the child theme means you preserve the parent theme’s look and functionality, while also allowing for the parent theme to be updated without losing your customizations. When using the Create Block Theme child theme option you enter the same details to generate the theme, but only the changes you apply in the Site Editor are written to the child theme. For example, let’s say you’ve installed the Blockbase theme, but you applied the same dark theme colors to it. Now you use the Create Child Theme option. Enter the relevant details and click Generate.

Again, this will create an installable zip file that you can install on your local site or on an existing site.

A recent addition to Create Block Theme is the ability to create a style variation. This is useful if you want to create multiple style variations for the same theme. Having global style variations gives your users the ability to switch between predefined styles from the Global Styles interface. For example, let’s say you’re creating a new theme and you wanted to ship the default style and the dark theme style as two different variations the user can choose from. So you set up your dark theme colours in the Site Editor and save them as before. However, this time you select the Create a style variation option and give the new variation a name, then click Generate.

The variation is created in the styles directory of your active theme. Now when you edit the theme in the Site Editor, the theme has been reset to the default style. However, you can apply the dark theme variation by opening the Global Styles interface, clicking Browse styles and you can then select between the default and the dark theme. If you look at the code for your theme, you’ll see the dark theme variation has been created in the styles directory.

Finally, the export option is when you’re ready to package your theme, either to be installed on another site or to add to somewhere like the WordPress themes repository. Using this option will take the active theme and any user changes saved to the database and write everything to an installable zip file. You can save this file anywhere on your local computer.

Once you have the zip file, it can be uploaded to a WordPress site via Appearance -> Themes and clicking on the Add New button.

And that wraps up this tutorial on using Create Block Theme. For more information on block theme development, as well as the use of Create Block Theme, why not try part one of the Developer’s Guide to Block Themes on learn.wordpress.org.

Happy Coding

Introduction

Hey there, and welcome to Learn WordPress.

Today you’re going to learn about a handy plugin in the WordPress plugin repository that will streamline your block theme development called Create Block Theme.

After a short introduction to Create Block Theme, we will cover how to install it on your WordPress site, and go over the main features that Create Block Theme provides.

Create Block Theme

Create Block Theme works in conjunction with the Site editor to allow you to create and edit block themes right from the WordPress dashboard. 

Whether you are developing your new theme on top of a base theme or starting a new block theme from scratch, you will find Create Block Theme very useful. 

Once installed, Create Block Theme provides a series of features that streamline your block theme development process, from creating a blank theme, all the way to exporting the current theme to an installable zip file. 

Additionally, Create Block theme also allows you to add Google fonts or local fonts to your theme, which we will cover in a separate tutorial.

Installation

You can install Create Block Theme through the Plugins page of your WordPress installation. 

• First, navigate to the list of Plugins, 
• Then, click on the Add New button, 
• In the search box on the top right, search for Create Block Theme

This will search the WordPress.org plugins repository. 

Once the plugin is found, click on Install Now to install it. 

After it’s installed, click Activate it to activate it in your WordPress install.

Once activated, the Create Block Theme sub-menu item will appear under Appearance in the dashboard menu.

Alternatively, you can also search for Create Block Theme in the WordPress plugins directory at wordpress.org/plugins. To install it download the plugin zip file, and install it manually through the Add New plugin screen.

Usage

Create Block Theme gives you the following options for block theme development

Create blank theme 

This option allows you to start a new block theme from scratch. When you select this option you will be prompted to add the following details about the new theme

• The Theme Name
• The Theme Description
• The Theme URI
• The theme Author
• and the Author URI

Of these fields, only the Theme Name is required to create a blank theme, as it’s needed to create the theme directory.

Once you add the relevant details and click Generate, the new theme will be created.

You can then navigate over to the Themes list to view your new theme, see its details, or activate it. 

Once it’s activated, you can edit it in the Site Editor, and make the changes you need for your new theme development project.

If you take a look at the theme directory, you’ll see it’s created the required style.css file and an index.html template. 

It also contains a theme.json to manage global styles, a readme.txt file that’s used for the WordPress.org theme repository, and header and footer template parts.

Overwrite Theme

During development, it’s often useful to make changes to the Site Editor, and then store those changes in the theme file system. One reason for this is that you want to save these incremental changes to a revision control system, like git or subversion. This is where the Overwrite Theme option is handy.

For example, let’s say you created a blank theme and added a Single template to the template list. 

Then, you changed the Global Styles of the theme, changed the background color, text color and the color of the links to create a dark theme effect. 

In this case you’re using the following colors:

A dark colour for the background, and a light green colour and light purple colour for the text and links:

Background: #263238

Green Color: #c3e88d

Purple Color: #c792ea

When these changes are saved, they will be stored in the database for this site. However, you would prefer to write these changes to the theme files.

You can now use the Overwrite option of Create Block Theme, by selecting it, and clicking Generate. 

This option will take all the changes saved in the database, and write them to theme files. In this case, it will create the single.html template in the templates directory, and update the theme.json with the color changes. 

Clone

Sometimes, you might want to create a clone of the currently active theme, to test something out. This is where the Clone Theme option is handy.

For example, let’s say instead of writing the dark theme colors to the current theme, you wanted to create a separate copy of the theme with the changes saved to the database.

Using the Clone option of Create Block theme will ask the same questions as when creating a new theme. Once you enter the new values, it will create a copy of the active theme, including the changes you’ve saved in the editor. This clone will be exported as an installable zip, which you can install either on your local site or on another site.

You can now switch between the original theme, and edit it in the editor. Or you can activate the cloned theme, and work with it. 

If you view the theme directory, you can see the original theme, as well as the cloned theme.

Child theme

The option to create a child theme is handy when you’re building a site using an existing block theme, from the WordPress.org theme repository, but you need to apply a few customizations. 

Just like a child theme for a classic theme, adding your customizations to the child theme means you preserve the parent theme’s look and functionality, while also allowing for the parent theme to be updated without losing your customizations. 

When using the Create Block Theme child theme option, you enter the same details to generate the theme, but only the changes you apply in the Site Editor are written to the child theme. 

For example, let’s say you installed the Blockbase theme, but you applied the same dark theme colors to it. 

Now you use the Create child theme option, enter the relevant details, and click Generate.

Create a style variation

A recent addition to Create Block Theme is the ability to create a style variation. This is useful if you want to create multiple style variations for the same theme.

Having Global Styles variations gives your users the ability to switch between predefined styles from the Global Styles interface. 

For example, let’s say you’re creating a new theme, and you wanted to ship the default style and the dark theme style as two different variations the user can choose from. So you set up your dark theme colors in the Site Editor and save them as before.

However, this time, you select the Create a style variation option and give the variation a name. The variation is created in the /styles/ directory of your active theme. 

Now, when you edit the theme in the Site Editor, the theme has been reset to the default style.

However, you can apply the dark theme variation by opening the Global Styles interface and clicking Browse themes. You can then apply either the default theme style or the dark theme variation. 

If you look at the code for your theme, you’ll see the dark theme variation has been created in the styles directory.

Export

The Export option is when you’re ready to package your theme, either to be installed on another site or to add to somewhere like the WordPress themes repository. Using this option will take the active theme, and any user changes saved to the database, and write everything to an installable zip file. You can save this file anywhere on your local computer.

Once you have the zip file, it can be uploaded to a WordPress site via Appearance -> Themes -> Add New, to be activated on any WordPress site.

And that wraps up this tutorial on using Create Block Theme. For more info on Block Theme development, as well as the use of Create Block Theme, try part 1 of the Developers Guide to Block themes on Learn WordPress.

Happy coding!