How to create block based theme in wordpress

In a WordPress block theme, our website design is made with blocks. This design includes both content and non-content areas, such as header, footer and sidebar.

Therefore, using a block theme lets us to edit our site’s appearance without any code intrection.

As explained in the WordPress docs:

WordPress theme development with block themes uses templates made entirely of blocks, enhancing the post content of various post types (pages, posts, …), the block editor can also be used to edit all areas of the site: headers, footers, sidebars, etc.

These are a part of WordPress Full Site Editing (FSE). This concept was brought into the core software with WordPress 5.9.

With FSE, we can access a new Site Editor that allow us to build block layouts and edit them as we need. Additionally, we can use global styles to make whole site design changes to our theme and website appearance.

File structure of block themes are different from classic themes WordPress Template Hierarchy. with this we are used to. In classic themes(PHP Based) page elements are generating with php and javascript, where in Block themes , WordPress Core provide markup and basic styling .

Block theme structure are very simple with just a few required files :  index.php, style.css and template/index.html.

A typical block theme file structure, pulled from the WordPress Editor Handbook:

#! basic block-theme structure
theme
|__ style.css
|__ functions.php
|__ index.php
|__ theme.json
|__ templates
    |__ index.html
    |__ single.html
    |__ archive.html
    |__ ...
|__ parts
    |__ header.html
    |__ footer.html
    |__ sidebar.html
    |__ ...

style.css: Contain all styles or stylesheet as classic themes

functions.php: Contain theme setup and additional functions or enqueue styles

index.php: This is an empty file to switch default files in case of activating block theme without block editor

theme.json: Optional configuration file to set default styles and enable/disable features

templates: Its contain template files, these files follow same tempalate hierarchy as classic themes

• index.html: Primary template to show page or post like index.php in classic themes
• single.html: Template to show single page or post like single.php
• archive.html: To show list of posts

parts: Common collection of blocks used in block templates

• header.html: Global Header block
• footer.html: Global Footer block
• sidebar.html: Sidebar Block

First of all we need to install a plugin named “Create Block Theme” plugin to create block theme. This plugin is provided by wordpress.org to create block theme, it allow to export theme, clone theme, create child theme of a block theme, override theme, and create style variations.

After installing and activating Create block theme plugin there two option available in dashboard>Appearance

Now we have to go Create Block Theme option dashboard>Appearance>create block theme and select create blank theme

Enter Theme name, description, author and theme URI, tags and screenshots

Click generate button after filling all details.

Now our theme has been created, go to appearance>themes and check there a new theme has been added

Now click on Editor in appearance and you can see components list in left sidebar and block style in right sidebar

We can add or edit components in our theme templates

From the top dropdown go to Browse all Templates

Add new template from “Add New” button in top right and select a template. In my case I select Front Page template for showing on home page

Now we have to design our theme header footer and layout

After creating template and header footer just click on save button in top right and save the template

After saving the template go to preview and refresh page and see the new design has been show of you homepage from Front page template

Thank You!

If you need custom WordPress Development services then feel free to reach us and also explore our exclusive range of WordPress WooCommerce Extensions.

!!Have a Great Day Ahead!!