Experimental: Theme structure

Download the course material

Since the creation of this video, index.html is needed inside the theme folder. The file has been added to the course material, but is not shown in the video.


Let’s get started with the fun part, and have a first look at our block based theme.

To follow along, please open the theme folder in your code editor.

Here you will find a basic functions.php file, that contains our theme support.

An index.php file, that is used as a fallback, when full site editing is not enabled.

We have a basic style.css file, an editor style, a readme file and a license file.

There are two folders, that you might not recognize, if you have not tried out full site editing before:
block-template-parts and block-templates.

Inside the block-templates folder, you will be placing your base templates.

front-page.html would be the eqvalent of front-page.php if we were building a PHP based theme.

Inside the block-template-parts folder, you will be placing your template parts.
It’s that simple.

How you decide to structure your theme, is up to you.
For example, you might want to place your header, footer, and content parts inside this folder. But you can also use subfolders.

header.html would be the eqvalent of header.php if we were building a PHP based theme.

Please open functions.php in your code editor.

We are only adding the basic theme support that we need.
You might notice, that I am not adding support for the title tag.
Because in full site editing, that is already included, you don’t have to add that as an extra.

But I have added support for our featured image, block style, editor style, and support for wide and full width blocks.

For the purpose of the course, our themes style.css file is very basic.
I have added a couple of colors and alignments, and that’s it.
We will be relying on the block styles.

So, what is index.php for?
In our theme, we are only using it to display a message, asking the user to enable full site editing.

But it is also included to illustrate that you can actually have both a PHP based theme, and a full site editing theme. So you can add support for full site editing to your existing themes.

Just like our PHP based themes, block based themes follow the WordPress template hierarchy.

If you need a refresher, you will find links to where you can find information
about the template hierarcy in the course material.

The following default templates are supported:

  • index,
  • 404,
  • archive,
  • author,
  • category,
  • tag,
  • taxonomy,
  • date,
  • embed,
  • home,
  • front-page,
  • privacy-policy,
  • page,
  • search,
  • single,
  • singular,
  • and attachment.