I wanted to explore the ease of developing the latest block based WordPress theme, so, I first went ahead and checked if underscroses dot me, which is a Automatic – the company behind WordPress dot com, backed up theme boilerplace for building WordPress themes and it follows the best practices by default. But _s is not yet generating the block based theme, it is still generating the classic WordPress theme files and folder. To know this very fact, I had to genarate _s theme, upload to my local WordPress installation on my Linux desktop, activate the newly _s generated theme and check for the theme editor option but it was not available.
This post will help you understand the standard skeleton of the block based WordPress theme and how the WordPress block based latest templates, templates parts, multiple stylesheet files work and make WordPress theming modular, that speed ups the page load and make the site owners and bloggers happy.
To develop a WordPress block theme, you need to have your local WordPress development environment set up and running, you need a text editor, and a latest web-browser. Some familiarity with HTML, CSS, JavaScript will help. File sctructure of block theme is like this, theme_folder, in root theme folder you must have styles.css, functions.php, theme.json, index.php, then folders named templates, parts, and styles. Template folder consists of {index,page,404,home,archive}.html, styles folder consists of {red,blue,green,}.json and parts folder consists of {header,footer}.html
Download & Install WordPress Locally
I assume that you already have your preferred web server with php and MySQL up and running if not please install XAMPP on your system, it is free open-source and it is cross platform, which means it is available for Windows, Mac and Linux.
Download & Install WordPress on XAMPP Server
Creating Files and Folders for WordPress Block Theme
I’ll be using bash on my Windows 10 to create theme files and folders.
Under /wp-content/themes/ directory, create a folder and change the folder name for your block theme. then create {index,functions}.php style.css theme.json, and create folder in your block theme root directory templates, parts, styles
cd wp-content/themes/
mkdir block_theme_demo
cd block_theme_demo
touch {index,functions}.php theme.json style.css
mkdir templates parts stylesReview WordPress 2022 Theme
Before we start creating our WordPress block theme, let’s have a look at the WordPress 2022 theme’s site editor feature and theme files and folder.
Stay tuned for the next post in this seriese.