How to Create a Block Theme for WordPress (The Easy Way)

Last Updated on March 16, 2023 by Leave a Comment

How to Create a Block Theme for WordPress (The Easy Way)
Blog / WordPress / How to Create a Block Theme for WordPress (The Easy Way)

Creating a WordPress Block Theme for your website isn’t as hard as you might think. WordPress Block themes have been growing in popularity since their introduction in WordPress 5.9 with a growing number of premade block themes available in the WordPress repository. And, for those who want to create a WordPress block theme on your own, you’re in luck. The Create Block Theme plugin simplifies the process so you create a custom block theme quickly without extensive coding. Plus, you can even use it to create a child theme for your site.

In this post, we’ll explain the benefits of using the Create Block Theme plugin and how to create your own block theme in a few clicks.

What is a WordPress Block Theme?

WordPress block theme

A WordPress block theme is a full site editing theme for WordPress based on blocks. A block theme allows you to create any page or post using a drag-and-drop interface with blocks and block patterns you can use to build your content. You can even create custom templates and template parts (like headers and footers using the site editor.

Additionally, it is easier to add custom styles to a block theme. There’s no need to edit the functions.php, style.css, or other theme files to create custom blocks, fonts, or add theme styling. Everything can be accomplished by editing one file – theme.json. WordPress considers block themes to be the future of WordPress. Thankfully, there are quite a few advantages to using them.

Intro to the Create Block Theme Plugin

For this post, we’ll be highlighting the Create Block Theme plugin, which is a free plugin available in the WordPress plugin repository. It allows you to create a new theme, blank theme, or child theme quickly. You can also embed Google fonts – either via CDN or locally.

The Create Block Theme plugin saves you a ton of work creating child themes by allowing you to create and install one in a matter of minutes. Let’s take a look at the steps you’ll need to take to use the plugin.

Key Features

The Create Block Theme plugin has some amazing features to make theme creation easy and fast:

  • Create a block child theme with a single click.
  • There’s no extensive coding required.
  • It’s easy to clone a theme.
  • You can export WordPress block themes for use on other projects.
  • You can create a blank block theme.
  • Add a new style variation to the global styles in site editor

How to Create a WordPress Block Theme?

Before we use the plugin to create a block theme, you must first install and activate a parent block theme. For this tutorial, we’re going to use the Twenty Twenty-Three theme.

Install A Parent Block theme

To get started, log in to your WordPress dashboard. Next, navigate to Appearance > Themes.

WordPress dashboard

You can choose any theme you wish – as long as it’s a WordPress block theme. If you’d like to use a block theme other than Twenty Twenty-Three, start by clicking the Add New button in Appearance > Themes.

Add new theme

Click the block theme tab to reveal the options for available block themes.

choose WordPress block theme tab

Once you find the desired theme, hover over it, then click the Install button.

Install block theme

Install Create Block theme Plugin

The next step is to install the Create Block Theme plugin. There a few ways to install a WordPress plugin, but this one can easily be installed from the dashboard. Start by navigating to Plugins > Add New in the WordPress dashboard.

Add new plugin

Type Create Block Theme in the search box. When the page refreshes, select the plugin, then click Install Now.

Install Create Block Theme plugin

Once installed, simply activate the plugin.

activate plugin

Configure the Create Block Theme Plugin

Now that the plugin has been installed, navigate to Appearance > Create Block Theme.

configure Create Block Theme plugin

In the plugin’s settings, you’ll have a few options:

create block theme settings

  1. Export (theme name)
  2. Create child of (theme name)
  3. Clone (theme name)
  4. Overwrite (theme name)
  5. Create blank theme
  6. Create a style variation

Export Theme

This setting allows you to export the activated theme along with any changes you’ve made. Any templates, global styling, fonts, or other structural changes will be present. Using this setting, you can export the theme, then use it in other WordPress installations. All of your settings will be preserved.

To export your currently installed theme, select the export option, then click the generate button. The file will be downloaded to your downloads folder as a zip file, like any other WordPress theme.

Create Child Theme

create child theme

This option allows you to create a child theme based off of your current parent theme. Before generating the child theme, be sure to give your theme a name, description, URL, note the author, as well as the author URL if you choose to. Once you click the generate button, the plugin will automatically download your child theme as a zip file.

Clone Theme

clone block theme

When cloning your block theme, the plugin will create a new theme. The clone will retain all assets of the parent theme, as well as any user changes. Similarly to creating a child theme, be sure to name your theme, give it a description, and note a theme URL, author, and author URL.

Overwrite Theme

overwrite theme

When you overwrite your block theme, all user changes will be saved and converted to theme changes. Any templates you create or style changes you make will be saved into theme files, making them a permanent part of the theme.

Create Blank Theme

create blank theme

When you select this option, a blank theme will be created within your website’s theme directory. Before generating your new theme, give it a name, description, and theme URL (if desired), note the author, and author URL. Upon clicking the generate button, you can navigate to Appearance > Themes to view your new blank theme.

new blank theme

Create a Style Variation

Style variations are located in Appearance > Editor. To locate them, navigate to the theme editor, then click the styles button at the top right corner of the editor. There, you can create new styles for text, colors, and buttons. There are additional options for styling individual blocks, too.

theme styles

Once you’ve created styles, you can create a style variation in the Create a Block Theme plugin by choosing the last option in the settings. Give your style a name, then click Generate.

new style variation

To view your new style, navigate back to Appearance > Editor, click the style icon, and select browse styles. There you can browse through the styles to locate the new one you just created.

custom style

Manage Theme Fonts

To manage the fonts installed in your theme, navigate to Appearance > Manage Theme Fonts. There you’ll be able to view all of the installed fonts in your theme.

manage theme fonts

One of the most surprising and amazing features of the Create Block Theme plugin is the ability to manage your theme’s fonts. In this section of the plugin, you can remove entire font families or a single variation. Additionally, you can easily add Google fonts to your theme either by hosting them locally or calling them through the Google Fonts CDN. Here are some of the best Google fonts for the web.

To remove a font family or font variation, simply click the remove link next to the family or variation you’d like to remove from your site.

remove font

Add a Google Font

To add a Google font, start by clicking the Add Google Font button at the top of the page.

add Google font button

When the page refreshes, use the dropdown menu to select a font. You’ll be able to choose any font in Google’s font library.

select a font

Once you make a font selection, you’ll have the option to choose the variants you wish to include. You can choose all by clicking the checkbox at the top or choose individual ones. After choosing variants, click the Add google fonts to your theme button.

Add Google font

You can also add local fonts to your theme. Start by clicking the Add Local Font button. Fonts in the ttf, off, and woff2 file formats are supported.

add local font button

Upload a font by choosing a file saved on your local machine. Next, give it a name, and apply a font style, and font weight. Finally, click Upload local fonts to your theme.

Once fonts are installed, they can be managed within the Create Block Theme plugin and applied to styles in the site editor.

fonts in style editor

After fonts are added, you can head back over to the Create Block Theme tab to apply one of the options to create a child theme, export it, clone it, or overwrite your current theme. All fonts will be preserved along with style variations, as well as templates that you create.

Creating a WordPress Block Theme Doesn’t Have to Be Hard

Thanks to the Create Block Theme plugin, it’s easier than ever to create a block theme for your website. You can create your own theme templates using the full site editor, add new styles, add and manage fonts, and even export your block themes for use on other projects. There’s no coding, no theme files to alter, and it’s all done within a few clicks. If you’re looking to start using block themes, or are looking for an easy way to manage them, consider using the Create Block Theme plugin.

For those using page builders, there should be built-in options for creating custom themes. With Divi, you can easily import and export all of your templates and designs using the theme builder. This allows you save entire site styles to be used like a child theme to kickstart new website builds in a few clicks.

Have you made the switch to WordPress block themes? If so, let us know in the comments below.

Divi

Want To Build Better WordPress Websites? Start Here! 👇

Take the first step towards a better website.

Get Started
Divi
Premade Layouts

Check Out These Related Posts

What Size Image To Use On WordPress (Key Factors & Tips)

What Size Image To Use On WordPress (Key Factors & Tips)

Posted on November 17, 2024 in WordPress

Are you experiencing slow website loading speeds? The low website speed could result from many factors, and large image sizes are one of them. If you have a website with a great deal of content, image size could likely be one of the factors behind your site’s slow speed. Hence, it is...

View Full Post
How to Make a Responsive Website in 2024 (No Coding)

How to Make a Responsive Website in 2024 (No Coding)

Posted on November 9, 2024 in WordPress

Is your website not performing well on mobile devices? Poor layout or slow loading times can cause users to leave your site before they even engage with your content. In today’s mobile-first world, a responsive website is no longer just an option—it’s a necessity. Whether you’re...

View Full Post

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Get Started With Divi