Reading list Switch to dark mode

    How to create block based theme in wordpress

    Updated 18 September 2023

    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.

    Start your headless eCommerce
    Read More

    File structure of wordpress block theme

    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.phpstyle.css and template/index.html.

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

    #! basic block-theme structure
    |__ 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 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!!

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content