{"id":373012,"date":"2023-04-12T04:43:24","date_gmt":"2023-04-12T04:43:24","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=373012"},"modified":"2025-02-18T07:23:32","modified_gmt":"2025-02-18T07:23:32","slug":"how-to-create-block-based-theme-in-wordpress","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-create-block-based-theme-in-wordpress\/","title":{"rendered":"How to create block based theme in wordpress"},"content":{"rendered":"\n

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. <\/p>\n\n\n\n

Therefore, using a block theme lets us to edit our site\u2019s appearance without any code intrection.<\/p>\n\n\n\n

\n

What is a wordpress block theme?<\/h2>\n<\/div><\/div>\n\n\n\n

As explained in the WordPress docs<\/a>:<\/p>\n\n\n\n

\n

WordPress theme development<\/a> with block themes uses templates made entirely of blocks, enhancing the post content of various post types (pages, posts, \u2026), the block editor can also be used to edit all areas of the site: headers, footers, sidebars, etc.<\/p>\n<\/blockquote>\n\n\n\n

These are a part of WordPress Full Site Editing (FSE). This concept was brought into the core software with WordPress 5.9.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\n

File structure of wordpress block theme<\/h3>\n<\/div><\/div>\n\n\n\n

File structure of block themes are different from classic themes WordPress Template Hierarchy<\/a>. 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 .<\/p>\n\n\n\n

Block theme structure are very simple with just a few required files<\/a> :  index.php<\/code>, style.css<\/code> and template\/index.html<\/code>. <\/p>\n\n\n\n

A typical block theme file structure, pulled from the WordPress Editor Handbook<\/a>:<\/p>\n\n\n\n

#! basic block-theme structure\ntheme\n|__ style.css\n|__ functions.php\n|__ index.php\n|__ theme.json\n|__ templates\n    |__ index.html\n    |__ single.html\n    |__ archive.html\n    |__ ...\n|__ parts\n    |__ header.html\n    |__ footer.html\n    |__ sidebar.html\n    |__ ...<\/pre>\n\n\n\n
style.css: Contain all styles or stylesheet as classic themes<\/p>\n\n\n\n
functions.php: Contain theme setup and additional functions or enqueue styles<\/p>\n\n\n\n
index.php: This is an empty file to switch default files in case of activating block theme without block editor<\/p>\n\n\n\n
theme.json: Optional configuration file to set default styles and enable\/disable features<\/p>\n\n\n\n
templates: Its contain template files, these files follow same tempalate hierarchy as classic themes<\/p>\n\n\n\n