Create a theme using the Site Editor

By following this guide, you can create a basic block theme without coding.

The colors and styles in this tutorial are from the theme used on this website, but I encourage you to experiment, play around, and choose your own styles.

You can download a copy of the completed theme for reference and inspiration.

In this guide, you start with the basic templates, and then you will learn how to export your changes as a new theme. After that, you can continue improving the theme by following the instructions under the headline “Next steps.”

You will edit templates, template parts, and styles in the WordPress Site Editor using WordPress version 6.2 or newer.

Besides the Site Editor, you are going to need two plugins that you can install from the plugin directory: Gutenberg and Create Block Theme.

Prepare your WordPress installation

Your first task is to prepare your WordPress test installation and download and activate the plugins: Gutenberg and Create Block Theme. I also want you to start thinking about a unique name for your theme.

If you do not have a local WordPress installation, you can use the WordPress Playground at: .

The WordPress Playground is an experimental feature where WordPress runs directly in your browser.

Introduction to the Site Editor

Next, I recommend reading the introduction to the Site Editor (Estimated reading time: 10 minutes).

Create your theme

After activating the Create Block Theme plugin, go to the new menu under Appearance > Create Block Theme.

On the plugin page, you have a couple of options:

• Export the active theme.
• Create a child theme.
• You can create a clone, a copy of the active theme, but using your own theme name.
• Overwrite, which updates the files in the theme folder.
• Create a blank theme.
• Create a style variation. With a style variation, you do not make structural changes; you only edit things like the colors. Style variations are added to the active theme.

You are going to pick “Create blank theme“.

In the form on the right side of the plugin, fill in your theme name.
If you find that your theme name is already in use, try adding your first or last name to it.
Example: Instead of “WordCamp,” call it “WordCamp Carolina”

Next, select the “Generate” button on the bottom left side, and activate the new theme under Appearance > Themes.

Add fonts

Before opening the Site Editor, you can save time by selecting your fonts so that you don’t need to go back and forward between the Site Editor and the WordPress admin area.

The theme fonts feature is part of the Create Block Theme plugin, and it only works for the active theme.
Go to Appearance > Manage Theme Fonts.
On the options screen, click on the button that says “Add Google Font.”

Select your favorite Google fonts from the dropdown:

The more variants and font weights you add, the longer it will take to load the fonts. You can see the size at the bottom right of the options page.

When you are done, don’t forget to click on the button “Add Google fonts to your theme”

Edit the index template

With the fonts selected, you can move on to the Site Editor.
Open the Site Editor from Appearance > Editor:

Since you are working with a blank theme, the theme only has one template, the index, and two template parts: the footer and header.

The index template is a fallback used to display everything on your website that does not have its own template. So, for example, if you would go to the front of your WordPress site and preview the 404 page right now, it will display the blocks that are on the index.

By editing the index template first, you can use the updates as a base for your other templates. In addition to typography, you will need to add a color palette and make decisions about spacing and styling.

Open the index template by clicking anywhere on the preview.

Apply the font family

To apply the font family, open the Styles sidebar and the Typography panel. Select Text, and add the font family you want for your body text.

Select a font size. WordPress includes several responsive font-size presets: Small, medium, large, and extra large, but you can also choose a custom size and unit.

Optionally, if you want your headings to have a different font family, open the Headings panel and set your preferred font family.

Create the color palette and apply colors

The next panel is Colors, and I want to show you how to create a custom color palette: Select the Palette, locate “Custom” at the bottom of the panel, and click on the plus icon to add colors.

Add as many colors as you need for your design. You can name, update, and remove colors. You can return to this palette at any time to make changes.

You can now update the body background color and text colors and apply an accent color to headings and buttons.

You should also replace the browser’s default link color.
When you select the links panel, you will find two tabs: The first tab is for the default link state, and the second tab is for the hover.

Customize content width and spacing

Going back all the way to the start, there is one site-wide panel left, which is the Layout.

Here you can adjust the content width and the wide content width. You are not limited to using pixels; you can choose one of the following units: pixels, %, em, rem, vw, and vh.

Optionally, you can add extra spacing on the left and right sides to prevent your content from touching the edge of the browser window. Just like with the font sizes, WordPress adds premade spacing presets, but you can also choose your own custom value and unit.

Edit the site header

Let’s move on to the site header. The header template part in the blank theme is pretty basic, and you can edit it as you need: Change colors and typography, move blocks around, and update the menu (the navigation block).

In the example theme, I have updated the site title to match the size and font family of the navigation block. I have also removed the empty logo and site tagline block.

Edit the main content area

The main content area of the index template is the query loop block. I strongly recommend wrapping the query inside a group block. This will enable more layout options like wide and full width.
Select the query block, open the options menu, and select group.

To keep the template accessible, the main content must use the <main> HTML element. But don’t worry; you don’t need to know or write any code to fix this:

1. Select the wrapping group block and open the Advanced panel in the block settings sidebar.
2. Find the select list in the HTML Element option and change the default div to main.

Important: The template must only have one <main> element, so you also need to remove the <main> from the query loop. Select the query loop, open the Advanced panel, and change the <main> to a div.

And because the other templates will be based on the index template, you only need to do this step once.

Decide what blocks to use for the list of blog posts

You can also edit, add and remove blocks inside the query block, the blocks that make up your list of blog posts.
If you want to display the excerpts instead of the full post content, you can select the post content block and transform it into the post excerpt from the block toolbar.

Name the template sections

When many blocks are in the list view, it can help name them. You can name the container blocks by adding an id, which also works as an HTML anchor.
Select the wrapping group block, open the Advanced panel, and add “Main” in the HTML anchor option. You can also name the query “Blog”.

Add a pattern to the site footer

I want to show you how to add and use premade patterns in your templates. First, expand the footer template part using the list view, and delete all the blocks inside the template part.
Now select the block inserter in the empty template part, type in “footer” in the search field, and then select “Browse all”.

This opens a sidebar with several premade patterns to choose from. Click on a pattern to insert it.

Adjust the styles to match your wanted design. You can change the colors and add or remove blocks. In the example theme, I have changed the background color of the footer to dark blue and increased the font size.
– You may need to select the inner blocks of the pattern to find blocks that already have a font size set. That depends on the pattern you choose.

Don’t forget to save your changes.

Create the front page

Create a new page

Go to the WordPress admin area and create a new page. Select a suitable title that you will remember, for example, Front page. Add some content to the page.

After saving, open Settings > Reading, and set your new page as the homepage.

Create the front page template

Open the Site Editor by going to Appearance > Editor. Select Templates. Now, select the plus icon “Add new template”, and in the drop-down, select the Front Page template.

You will be asked if you want to use the premade design with the changes from the index template or Skip and start with a blank page. Select the premade design. All the blocks will be inserted for you.

Add new front page sections for your content

Now you are going to create the different sections for your front page. I recommend starting simple, with one section for the content and one for the blog.

1. Inside the main group, add a new group block.
2. Inside this new group, add the post content block. This displays the content from the static page you assigned as the homepage earlier.
3. Repeat the process and wrap the query loop inside a second group.

In the list view, the structure should look something like this:

The sections do not have to be perfect on the first try, so feel free to move the sections around and explore different styles by changing the background, text and link colors, borders, and spacing.

To display the latest blog posts on the front page template, you need to adjust a setting on the query block. Select the query block to open the settings sidebar, and deactivate the option “Inherit query from template”.

You can increase the spacing between the two sections by selecting the main group block, opening the block settings sidebar, Styles tab > Dimensions panel, and increasing the block spacing.

Next, try adding one or more sections using pre-made block patterns. For example, a pricing table or a call to action. Make sure these sections are still inside the main group block.

To preview your front page, select View (next to the Save button) and then View Site.

Create the single post template

Open the Site Editor, select Templates, Add a new template, and select Single. In the next step, select the premade design.

Remove the query and add the post content block

Once you are in the editor, open the list view and expand the blocks inside the query loop.

Step 1: Since you only want the template to display one post, select the group block that is inside the post template block, and move it outside the query. Now you can delete the query loop block and everything inside.

2. Transform the post excerpt block back to the post content block. We need to do this to make sure that all of the content shows when viewing a single post.
3. Select the post title block, and deactivate the option “Make title a link”, because you don’t want the post to link to itself.

Edit the remaining blocks in the template as you wish: Perhaps you don’t want the single view to show the featured image, or maybe you want the post title to be larger. You can also change the position of the post author, date, categories, and tags.

Optional: Add a comments area

Optionally, below the post, add the comments block, which includes a list of comments and the comments form.

Create the page template

To create the page template, repeat the steps for the single post template.

Pages do not support categories and tags, so I recommend removing these blocks. They will not display anything on the front of the website.
Keeping the author block and the date is, of course, optional.

Create the archive template

An archive template is used to display taxonomies like tags and categories, but also the date and author archives.

Open the Site Editor, and in the Navigation Sidebar > Templates, click on Add New Templates, and select Archive.

In the pattern selection modal -you know the drill -please select the premade template.

You can leave the archive page nearly identical to the premade index template since they both contain a query block that shows the list of results.

Above the query loop, inside the main group, add an archive title block. I also recommend adding the term description block.

Create the search results template

Open the Site Editor, and in the Navigation sidebar > Templates, click on Add New Templates, and select Search. In the pattern selection modal, please select the premade template.

The search results template is almost identical to the index and the archive.
At the top of the archive template, you added an archive title block; for the search, you can add the search results title block.

Inside the query block, but outside the post template, add a block called “No results”. Inside this container block, you can add blocks that should show when there are no search results.

I also strongly recommend adding a search block to the template so that the visitor can search again.

Create the 404 template

Open the Site Editor, and in the Navigation sidebar > Templates, click on Add New Templates, and select 404. In the pattern selection modal, please select the premade template.

Now you can decide what to show in the 404 template. I suggest adding a large heading and a search block.

If you want to keep the latest posts, then select the query loop block, open the settings sidebar, and deactivate “Inherit query from template” (This is the same step that you did with the query loop on the front page template).

Exporting the theme

When you are ready to export the theme, the Create Block Theme plugin helps you with the following automated steps:

• Saves your template and style changes to files in the theme folder.
• Copies media assets like images to the theme folder.
• Creates block patterns that are required for the images to work.
• Creates a .zip file of the theme that you will be asked to download via the browser.

There are two places where you can export your theme:

• In the Site Editor, click the Wrench icon to open the Create Block Theme sidebar.
• From the Create Block Theme options page in the WordPress admin area.

When you export the theme, you will be prompted to download a .zip file. The exported theme will not be automatically installed and activated on your website.

You can continue to work on your theme and override, clone, or export it as many times as you wish.

Installing the exported theme

I strongly recommend doing a test export first, using a different theme name. That way, you can install and activate the test theme and compare the result with the theme you are currently working on. This will help you spot any potential bugs.

When you install the theme from the exported zip file, you will notice that there are important changes: The templates and template parts are now listed as added by the theme and can no longer be deleted via the user interface.
Also, the color palette is no longer called “custom”; instead, it is listed as the theme palette.

To install a theme from a zip file, go to the WordPress admin, Appearance > Theme, Add New, and then “Upload Theme”. Next, you can activate the theme.

After editing, you can uninstall the Create Block Theme plugin. It is only used for the copy/clone/export features and for adding font files.
Please keep Gutenberg installed until WordPress 6.3.

Next steps

As the next steps, I recommend completing the following “challenges”:

• Create a home template that displays the blog on a separate page (not the front page).
• Create a style variation using the Create Block Theme plugin.
• Create a custom page template with a sidebar.
• Create a custom template for a specific category.
• Create a custom template that uses an alternative site header (create a new template part for this header).
• Adjust the site header: Try different layouts. Practice making a centered header menu with a logo in the middle or add a search block to the navigation.
• Create a template part for the comments area so that it is reusable.
• Add background images to the site header, site footer, or page sections using the cover block.
• Create a custom contact page template with support for your favorite forms plugin.