Template Parts in Mai Reach Theme

Think of Mai Reach template parts as the new widget areas for block based themes.

If you go to…

Dashboard > Appearance > Widgets

You might be used to finding things like…

• Before Header Widget Area
• Before Footer Widget Area
• Footer Widget Area
• Footer Credits Widget Area
• After Entry Widget Area

And many more.

At the time I wrote this post, Mai Reach theme only had one widget area. The sidebar.

So how do you put content in the old widget areas?

You use template parts.

Template parts are ready made positions in your layout that you can place any block, and therefore any content.

How do you use template parts?

First navigate to…

Dashboard > Appearance > Template Parts

You’ll see this list…

• Before Header
• Header Left
• Header Right
• Mobile Menu
• After Entry
• Before Footer
• Footer
• Footer Credits

Active and inactive template parts

In the image below

1. Before Header does not have an – Active label. So no content currently displays in that template part area.
2. Footer does have an – Active label. This means there is some content in that template part area.

Adding content to a template part area of your site

You add content to a Mai Reach template part area of your site in the same way that you add content to a blog post or web page.

Navigate to the template part that you want to use

Go to…

Dashboard > Appearance > Template Parts

You now see a list of template parts. Hover over the template part you want to use. Click the edit link.

I used the Mai Reach theme setup wizard to set up the site I’m using in these tutorials. So in my case, the before footer template part area already contains some content. But that’s OK. I can add more content above or below the content that’s already there.

Selecting any content that’s already in the template part

Adding, selecting and editing content inside a Mai Reach template part is just like editing any other content. So if you know how to add content to a blog post or web page, you already know how to add content to a template part.

In my case I want to put some new content above the content that’s already in this template part.

First I selected a block. Then I used the block navigation breadcrumbs at the bottom of the screen to select the containing group block.

Once the group is selected, I can add some more content above that group of content, or below that group of content.

I could use the three dot more options button. Or if I see an add block plus icon I could use that to insert a new block.

For my new content, I made a banner by placing a columns block inside a group block. I placed a heading block and a button block inside the group block. Then I added a background color to the group.

I added my banner above the content that was already in the before footer template part. I had to shrink the screenshot below, which makes the content look a bit squished. But I hope you can get the idea.

My finished web page looked like this…

I added the sale now on banner at the top of my before footer template part.

Because I placed my banner in a template part, my banner will display site wide.

The important points are…

• Template parts are replacing widget areas in block based themes.
• You add content to a template part in the same way that you add content to a blog post or web page.
• You just need to know how to find the template part you want to use.
• Template parts can display site wide, not just on a single post or page.

Go to: Dashboard > Appearance > Template Parts

The after entry template part is the only one that needs to be manually toggled on. The other template parts automatically show, as soon as you put content inside them.