If you haven’t done it already, make a templates folder inside your theme folder, and place a blank index.html inside it.

Then, if it doesn’t exist, create a parts folder inside the theme folder, and blank header.html and blank footer.html files

Your site structure should look like this now:

• parts/
  • footer.html
  • header.html
• templates/
  • index.html
• index.php
• style.css
• theme.json

Header and footer files

Add the following blocks to the header.html file. We can change this later, this is just to get a couple of blocks in the file to start:

<!-- wp:site-title {"textAlign":"center"} /-->
<!-- wp:site-tagline {"textAlign":"center"} /-->

Add the following to the footer.html file:

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Proudly powered by
<a href="https://wordpress.org/">WordPress</a>.</p>
<!-- /wp:paragraph -->

Again, all of this can be modified in the editor later, we just want to get a default file ready for now.

index.html

Add the following code to the index.html in the templates folder, to combine the header.html and footer.html into one file:

<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:template-part {"slug":"footer"} /-->

The template-part block looks for files in themes/theme_name/parts/. A path to the file is not necessary.

Next, we will add more blocks to the index.html.