A common pain point amongst new users of Block Themes is managing homepage content – how and where to edit it and if that should be done in the template itself. The problem with some block themes is that they put their demo content directly into the template. This can override whatever content you set ... Read more
A common pain point amongst new users of Block Themes is managing homepage content – how and where to edit it and if that should be done in the template itself.
The problem with some block themes is that they put their demo content directly into the template. This can override whatever content you set to show on your homepage. And if you don’t know better, you’ll start editing the template to add your own content.
Template Editing vs. Page Editing
WordPress maintains a separation between content and design.
That means that content like your page-specific text/images etc needs to be placed in the page editor.
The layout and design of your site is managed from the site editor, using templates.
It’s important not to directly edit the template and add your content there. Otherwise it’ll cause you headaches and WordPress won’t act the way you expect.
Here are the 2 biggest problems I’ve encountered when trying to get started with block themes, and how to fix them.
1. Your own homepage content is overridden by theme content.
You have made some posts and pages already in WordPress. Your site currently uses a static page for the homepage with posts displayed on a dedicated blog page.
You decide to try out a block themes. You install one, let’s say Beaumont.
You activate the theme and visit your homepage. You’re expecting to see the content you’ve already carefully crafted.
Instead you find the Beaumont blog layout!
Likewise, if you have your homepage set to show posts, but install a theme like Spectra or Frost, you will find that your posts are nowhere in sight, and you have the theme demo content instead.
2. You don’t realize the demo content is in a template and you edit it directly
You don’t find the usual Edit Page link in the toolbar. So you click Edit Site, which seems logical.
Then you get to work editing, without even realizing that you’re editing the template itself!
These scenarios demonstrate the commons issues you might face getting started with block themes.
How to fix these scenarios
First you have to understand the WordPress template hierarchy to understand why this is happening.
The WordPress template hierarchy
The template hierarchy is the system that determines which template WordPress will choose to display the content, when a page is requested.
Usually it’s quite straightforward – a single post will use the Single template. A standard page will use the Page template etc.
But the homepage is a bit unique and tricky. There’s potentially 3 templates that could be used:
- front-page: this will be used regardless of if you have set your homepage as blog posts or a static page. It has the highest precedence in the hierarchy.
- home: this will be used only if you’ve set your blog posts for the homepage. If you’ve set a static page, you’ll see your page content as expected.
- index: If neither a home nor a front-page template exists, then the index template will be used, so it should show whatever content you already have.
So in the scenarios I outlined, this is what happened:
- Beaumont comes with a front-page.html template, so the content in it always showed up on the home whether it was set to display posts or a page.
- On the other hand, Frost does not come with a front-page.html. Instead it has a home.html template. So the demo content inside that template showed up only when my Reading settings were set to display posts on the homepage. When I set my site to a static homepage, my own content showed up.
- If your theme uses an index template instead of front-page or home, like the Ollie theme does, it will display whatever content you’ve already created.
It’s a lot to expect a new WordPress user, or even someone that’s used WordPress before, to understand intuitively what’s going on here.
How do you know which template your theme is using?
- Go to Appearance → Editor → Templates
- Click on your theme name to filter out other templates
- Now see what you have:
So now you know why certain content is showing on your homepage, what do you do if you want to change that?
You’ll either need to edit the template that’s currently being used and/or create a new one.
For example, in the Beaumont scenario, if I want to show my own static page on the homepage and use the Beaumont template for the Blog page, this is what I would do:
Copy the Front Page Template to a Blog Home Template
- Go to Appearance → Editor → Templates
- Click on the front page template to open the Site Editor.
- Click on List view
- Select all blocks (click the first block, hold down the SHIFT key, then click the last block and it should highlight all of them) in List View, and either right-click or CMD+ C on a Mac (CTRL+C on a PC) to copy them to your clipboard.
- Click the WordPress logo at the top left to get back to the Templates page.
- Click Add New Template
- Select Blog Home. In some cases you’ll see a modal with a pattern or two to choose from. This will vary according to your theme. If one of the patterns presented fits your needs, by all means choose it to get started. But it’s not strictly necessary and you can skip it.
- After this step you’ll be in the Site Editor.
- Right-click or CMD+V (CTRL + V on a PC) to paste all the blocks, then click Save at the top right.
Now your blog page has the Beaumont layout for posts, and we can re-purpose the front-page template to show our static page content.
Edit the Front Page Template to Show Page Content
- Go to the site editor and click on the front page template again.
- Now you’re going to delete the blocks you don’t want. When you delete a block containing a Query Loop, you will see a warning message. But you can ignore it and proceed with deletion because in the next step we’re going to add a block that displays your content.
- In the Block Inserter, scroll down until you see the theme section. Choose the Content block which will show your static page content.
If you’re like me, you might be concerned about editing the template directly and not being able to revert back to its former state. But, don’t worry, you can always revert back to the theme’s default content by using the Reset option:
How to use your theme’s demo content, in the right way
In the case of a theme like Frost or Spectra, you might want to use their demo content as a starting point for your homepage, but you need to get that into the page editor instead of editing the template itself.
There are 2 ways to do this:
1. Copy template blocks to your page
The premise of the full site editor is that blocks are usable across pages and templates, anywhere you’d edit your site basically. That means you can copy/paste blocks from a template to a page to duplicate the design.
- Open the Blog home page template in the site editor
- Open the List View. Select and copy all the blocks.
- Tip: don’t copy header and footer template blocks, just the content sections.
- Exit the site editor and go to Pages → New
- In the editor, paste the blocks
2. Recreate the template using patterns
The template design should be comprised of patterns, which would be available in the pattern inserter when editing a page.
- Create a new page
- Click the Block Inserter and click on Patterns
- Look for the patterns that match the sections you want to add from the demo
- This works but can be a bit laborious because it’s not always easy to find each specific pattern.
- Some themes, like Frost, do make it easier by making full page layouts available as patterns. You’ll see them by clicking on Patterns → Page
Hopefully WordPress improves the onboarding experience for block themes in the future, providing an easier path forward which doesn’t require so much insider knowledge!
