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.
What is a wordpress block theme?
As explained in the WordPress docs:
A block theme is a WordPress theme with templates entirely composed of blocks so that in addition to the post content of the different 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.
now. Read More
File structure of wordpress block theme
Block theme structure are very simple with just a few required files :
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
Let’s start building theme
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
!!Have a Great Day Ahead!!