Full Site Editing

This lesson will teach you how to create WordPress themes in the Site Editor without writing a single line of code. You will learn how to create the required theme files, edit templates, and add fonts and styles.

Following this guide, you can create a WordPress block theme in about an hour, depending on your experience level.

For this lesson, you will need:

• WordPress version 6.5.3 or newer
• The free plugin “Create Block Theme”
• Some familiarity with using blocks

Step 1: Prepare your WordPress installation

Your first task is preparing your WordPress test installation and downloading and activating the Create Block Theme plugin. You can download the plugin for free from the WordPress plugin directory. You must also activate a block theme, such as Twenty Twenty-Four.

Create Block Theme is a utility plugin created for and by theme developers. You only need to use it for this tutorial’s first and last steps: Creating the theme files and exporting the theme as a .zip file. After that, you do not need to keep the plugin installed. Your new theme will work without any plugins.

Step 2: Create a new blank theme

After activating the Create Block Theme plugin, open the Site Editor from Appearance > Editor.

Click anywhere on the site preview to open the editor.

Next to your save button in the top corner, you will find a new icon that looks like a wrench. This button opens the Create Block Theme settings.

Open the settings and select “Create Blank Theme”:

Enter a unique name for your theme. Skip the option “Additional Theme MetaData”. Select the button “Create Blank Theme”:

Now, the plugin generates the required files, and you should see a notice in your browser: “Theme created successfully. The editor will now reload.”
Select OK. When the browser reloads, WordPress installs and activates your new theme.

Step 3: Configure style settings

Since you are working with a new blank theme, you must make decisions about typography, colors, and spacing. You will configure these settings directly in the Site Editor without needing to edit any theme files. If you have not used the Site Editor before, I recommend reading the introduction to the Site Editor.

To open the Styles panel in the Site Editor, click on the icon with the half-black, half-white circle. This button is in the top toolbar next to the save button and the wrench.

You can access the Typography, Colors, and Layout settings from their panels:

Add custom fonts

You will use the new Font Library feature added in WordPress 6.5 to add custom fonts.
Open the Typography panel. Next to the label that says “Fonts”, locate and click on the settings icon with the label “Manage fonts”:

Clicking on this button opens a modal with three tabs:

• Library: This tab shows your current font families.
• Upload: The option to upload font files from your computer.
• Install Fonts: Here, you can install fonts from external sources. The default source is Google Fonts (Adding custom sources is not covered by this tutorial).

You can upload or install any fonts that you want to use. In the tutorial, I am using the fonts Mulish and Philosopher, both available from Google Fonts.

Select the tab “Install Fonts”.
Use the search field to find your font family. Click on the font family name and select which variations, such as normal, italic, or specific font weights, you want to use.

Close the Font Library modal and save.

Apply default fonts to blocks

As part of the tutorial, I will set up the theme to use Mulish for the body text and Philosopher for headings. You can choose freely and test different font combinations.

Below the font families, you will find a list of elements (See the screenshot and video above). Open the Text panel, and in the Font option, select Mulish:

Go back one step and open the Headings panel. Select Philosopher. Save your changes.
WordPress updates the preview of your theme with your new fonts.

Create the color palette

Next, I want to show you how to create a custom color palette. Open the Colors panel and click on “Palette.”

To add a color, click on the plus icon next to the label that says “Custom”.
Enter a custom name in the grey placeholder field, and use the color picker tool to select a color or enter a color code.

You can return to this setting anytime to add more colors, edit, and remove colors. There is also an option to remove all the custom colors.

You can add any colors that you like. If you want to use the same colors that I am using in the tutorial, copy these names and color codes:

When you have added the colors, click “Done” and save your changes.

Apply the colors

Now, you need to decide which color should be used for which part of the theme.

Go back to the first Colors panel and apply the colors similarly to how you added the font families: In the list of elements, open the panels and select the colors.

• Set the background to “base” (white).
• Set the text to “contrast” (blue).
• Set the link and link hover colors to black.
• Set the button text to white and the button background to “primary” (red).
• Set the headings to “contrast” (blue).

Customize content width and spacing

Go back to the first page of the Styles panel and open the Layout panel.
In the Dimensions settings, you can adjust the default content width and the wide content width, which is the width that blocks use when you apply the “wide width” alignment option.

You are not limited to using pixels (px). You can choose one of the following units: pixels, %, em, rem, viewport width (vw), and viewport height (vh).

I suggest adding the following values as part of the tutorial:

• Content: 620px
• Wide: 1100px
• Top and bottom padding: 0px
• Left and right padding: 2.25 rem
• Block spacing: 24px

Remember to save. You have now finished the basic style settings. I will show you how to create and edit the theme templates in the next steps.

Step 4: Edit the index template

All the content you see on the front of a WordPress website is displayed using a template.
The 404, archives, posts, and pages all have their own template that you can create and edit in the Site Editor.

Since you are working with a new blank theme, it only has one template, the index. The index is the fallback template for everything WordPress displays on the front of your site. For example, if your theme does not have a template for pages, WordPress uses the index when you view a page. Because of that, the index is required to be included in your theme. Without the index, WordPress can not activate the theme.

Customize the site header

The index template created by the Create Block Theme plugin already has a basic header template part. In this part of the lesson, you will adjust the width, add a background color, and style the site title and menu (navigation block). Optionally, you can remove the site tagline, logo, and spacer block from the header.

Select the header template part: You can click on it at the top of the editor or, select it from the List View:

Make the header full width by adjusting the alignment option in the block toolbar.
Then, open the Options menu from the block toolbar (the three-dot menu) and select “Group”.

I want to show you how to make the header sticky. If you don’t want a sticky header, skip this step. With the new group block selected, find the Position panel in the block settings sidebar and select “Sticky”:

Next, add some colors:

1. Expand the contents of the header template part using the List View.
2. Select the first group block inside the header, and add the secondary color (the light teal) as the background:

3. Select the Site Title block and open the Typography panel in the block settings. Set the font family to Mulish, font size to medium, and appearance to bold.
4. Select the Navigation block and set the font size to medium and appearance to bold so the navigation block and the Site Title match.
5. Save.

Group the blocks in the main content area

The index template’s main content is the query loop block, which lists your site’s posts. It is placed between the header and footer template parts.

Select the block, open the Options menu in the block toolbar (the three-dot menu), and select “Group”. Wrapping the query loop inside a group enables more layout options.

The next step is important for maintaining the accessibility of your theme:
To keep the templates accessible, the main content must use the <main> HTML element, and there must only be one <main> HTML element on each WordPress page.
But don’t worry; you don’t need to know HTML or write any code to fix this, because you can change it in the editor.

1. Remove the <main> from the query loop. Select the query loop, open the Advanced panel, and change <main> to <div>.
2. Add the <main> to the group block. Select the group that wraps the query, open the Advanced panel, and change <div> to <main>.

Optional: Customize the blog

Inside the post template block, you will find some nested inner blocks: the title, featured image, content, author, date, categories, and tags. Together, these blocks create the look and feel of the posts on your blog, search, and archive pages.

You can move these blocks around, style them, or delete them. Perhaps you want the featured image to be above the title, or maybe you want to hide the author or the tags. Spend a few minutes experimenting with the blocks before moving on to the next step. Remember to save your changes.

Add a pattern to the site footer

You have finished customizing the site header and the main content area. I want to show you a faster option for the footer: using premade patterns.

1. Expand the footer template part using the List View.
2. Delete all the blocks inside.
3. Click on the plus icon in the empty footer, type “footer” in the search field, and then select “Browse all”.
4. Insert the pattern “Fullwidth footer with background color and three columns”.
5. Customize the pattern by changing the background color to “Contrast” (blue).
6. Save!

How to preview your theme

To preview the changes you have made so far, click on the icon of the laptop next to the save button at the top of the editor and select View site:

You have now finished the index template and can move on to creating the other templates.

Step 5: Create the front page

The theme’s front page will have two sections: static content from a page and a list of blog posts.

Go to your WordPress admin area and create a new page. Select a page title that you will remember, such as “Front page.” Add some example content. This page is only created for this tutorial to illustrate how the front page works. The page and content you add will not be part of the theme.

After saving, open Settings > Reading. Set “Your homepage displays” to “A static page” and choose your new page as the homepage:

Create the front page template

Open the Site Editor menu by going to Appearance > Editor.
From the sidebar menu, 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 choose a pattern. There is only one design to choose from: a copy of the index template you just created. Click on it to copy the blocks to your new template:

Add new front page sections

Now, you will create the two sections for your front page.

1. Select the group that is placed between the header and site footer and add a new group block inside it.

1. Inside this new group, add the content block. On the front of your site, this block displays the content from the static page you assigned as the homepage. In the editor, there is only a generic placeholder:

3. Click on the query loop block, open the Options menu from the block toolbar, and select “Group”.

To display the latest posts using the front page template, you must adjust the settings on the query loop block; otherwise, the front page will show the wrong content. Select the query loop block, open the block settings panel, and deactivate the option “Inherit query from template”:

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 color, link colors, borders, and spacing.

Increase the block spacing to add more space between the two sections.

1. Select the group block that is between the site header and the site footer:

2. Open the Styles panel:

3. Look for the Block Spacing setting in the Dimensions panel, and set it to six or seven, depending on your preference:

Save your changes.

Now that you have created the index template and the front page template, you will find that the next templates require fewer changes and are faster to create.

Step 6: Create the single posts template

Open the Site Editor menu again by going to Appearance > Editor. Select Templates. Add a new template, and select Single Posts. Select the premade design.

Once in the editor, open the List View and expand the blocks inside the query loop.
Since you only want this template to display one single post, you need to remove the query loop:

1. Select the group block that is inside the post template block and move it outside the query loop.
2. Delete the query loop block and everything inside. Ignore the warning.

Select the title block and deactivate the option “Make title a link”. Then, do the same for the post-date block.

Edit the remaining blocks in the template according to your preferences: Perhaps you don’t want the single posts to show the featured image. Or maybe you want the title to be larger. You can also change the position of the post author, date, categories, and tags. Optionally, you can add a comments block below the post.

Step 7: Create the page template

Open the Site Editor menu again by going to Appearance > Editor. Select Templates.
Click “Add New Template”, select Pages, and then All Pages.
It is important that you select the correct template type.

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

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

Step 8: Create the archive template

An archive template displays WordPress taxonomies like tags and categories, as well as the date and author archives.

Open the Site Editor menu, choose Templates, click “Add New Template”, and select All Archives. You know the drill: select the premade design in the pattern selection model.

Insert an archive title block, a term description block, and a spacer block above the query loop. You can insert them below the query loop and move them to the top if you find that easier.

Adjust the height of the spacer block to 50 pixels. This matches the height of the spacer block in your site header.

Step 9: Create the search results template

Open the Site Editor menu, select Templates, click “Add New Template”, and select Search. In the pattern selection modal, select the premade design.

The search results template is almost identical to the index and archive.
Add a search results title block above the query loop. Below the title, add a spacer block with a height of 50 pixels.

You should also add a message that shows to the visitor when there are no search results:

1. Inside the query loop block but outside the post template, add the “No results” block. It must be outside the post template block, or it will be repeated for every post in your loop.
2. Inside the no results block is a placeholder paragraph that you can customize. You can also add other blocks. In the screenshot, I have added the text “No posts were found.”

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

Step 10: Create the 404 template

Open the Site Editor menu, select Templates, click Add New Templates, and select 404. In the pattern selection modal, select the premade design.

In the 404 template, I suggest adding a large heading block as the page title and a search block.

If you want to keep the latest posts below the heading, you must select the query loop block, open the settings sidebar, and deactivate the option “Inherit query from template”. This is the same step you took with the query loop on the front page template.

Step 11: Export 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.
• Adds media files 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.

Go to Appearance > Editor to open the Site Editor menu, then click anywhere on the preview to open the editor. Click on the Wrench icon (next to the save button) to open the Create Block Theme settings. Now select “Export Zip”:

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

You can continue to work on your theme and export it as many times as you wish. You can use the export to create backups of your progress.

Installing the exported theme

Before you install the theme from the exported .zip file, I want to explain some differences between the theme you have worked on and the exported theme.

1. Once you install the theme from the .zip file, WordPress will see that the templates are added by the theme and not by the active user. This means that you can not delete them using the user interface. So, if you have created any extra test templates to practice on, you may want to delete them before exporting the theme.
2. Create Block Theme adds your custom color palette to the theme. The editor now calls it the “Theme palette,” not the “custom palette.” If you want to add new colors, edit the custom palette and export the theme again.

With that out of the way, to install the theme from a .zip file, go to the WordPress admin, Appearance > Themes, Add New, and then “Upload Theme”. Next, you can activate the theme.

If you have finished editing your theme, you can uninstall the Create Block Theme plugin.

Final words

The theme you have created is a fully working block theme, and you can absolutely use it on a live WordPress site. It is only a question if the theme matches what you want and need for your site.

This is a beginner-level lesson, and I have intentionally left out some things that you may have questions about, from how to add images, patterns, and custom page templates to how to create more advanced layouts. Look out for future lessons on these topics.

If you are a WordPress professional, you may have questions about the theme’s code quality and how it compares to a theme created by a developer who knows how to customize the code. This is an important question that is too advanced to answer in this summary. It depends on what you need for the project you are working on. Some things can not be done without editing the code, including “low-code” changes that are easy to learn. Other things can be solved by installing plugins on the site.

The first step is creating the theme using the Site Editor. This can take you far, but the theme can still be improved. A theme developer can help you find where the code can be improved and optimized. For some projects, you may want to collaborate with a developer familiar with block themes to make final adjustments and help you create custom functionality, even custom blocks.