This article explains how to customize the home and blog pages in a block theme like Twenty-Twenty Four. To set a static home page, one must create two pages and assign the home page to one of them and the blog page to the other. If you want to have both pages, you must create a home page template and associate the home page with it in the reading settings. Then, both templates must be edited to customize them. Additionally, it should be noted that templates should not contain content, only the structure and blocks to display the content.
One of the issues to resolve when installing a theme is customizing the home and blog pages. Let’s assume that you want to create a website that has both pages.
How it was done in a classic theme
Traditionally, this was done by making a corresponding change to the “Home Page Settings” option in a classic theme customization. There, you could choose what to display on your site’s home page. They could be the entries in reverse chronological order (what we all understand as a blog) or a fixed/static page. To set a static home page, you first had to create two pages. One became the home page and the other was where your posts would be displayed. If you didn’t do the latter, what was displayed by default was the page with the latest blog posts.
How to do it in a block theme
With Gutenberg and especially with site editing, you can still access that way of defining the home and blog pages but it is a hidden option. It is in “/wp-admin/customize.php”. However, this is no longer necessary because this option is now found in “Settings > Reading”.
But, the site editor uses the default templates and any you can create new ones to set up and customize the home and blog pages.
How to do it in Twenty-Twenty Four
Next, let’s see how we determine and adjust the home and blog pages in the Twenty-Twenty Four block theme. Although it is a specific case, the method is perfectly valid with any block theme. The only thing you will have to see is what templates you have activated by default, but their operation belongs to the core of WordPress.
Establishing the blog as a homepage
By default, Twenty-Twenty Four associates the Blog Home template with the home page. If you go to the preview of said template you will read the following: «Displays the most recent posts, as well as the site’s home page or a custom page defined in the reading settings. If it exists, the “Front Page” template will override this template when the posts are displayed on the front page.»
Indeed, if we go to the reading settings (Settings > Reading), we will check that “Your home page shows” has the “Your latest entries” option enabled. However, by default this is false in Twenty-Twenty Four. A little trick that needs to be corrected immediately.
The method to solve it immediately is to edit the “Blog Home” template, go to the “Template” tab in the settings in the right column, click on the three vertical ellipses and choose the “ Replace template. On the next page we will select “Blogging Index Template” from among the templates offered.
After that small change, we will have the blog established as the home page. And the reading settings match what we want.
Establishing a static page as homepage
If what we want as the home page is not the blog, we can leave it as it was, going again to the “Template” tab in the settings in the right column. Then we will click on the three vertical ellipses and choose the “Empty customizations” option.
But if what we want is to have a home page and blog, then we can choose the following:
First, create the “Home Page” template. In the preview, this template is explained as follows: «Displays the home page of your site, whether it is set to show the latest posts or is a static page. The home page template takes priority over all templates.«. Before continuing, remember that you can choose the design of your cover, from those offered in the pop-up that appears immediately after clicking to create the page.
Check that it is not the one on the blog. You already know that you can edit it by going to the “Template” tab again in the settings in the right column. Then click on the three vertical ellipses and choose the “Replace template” option.
Next, create two new pages: Home and Blog. In principle, leave them empty and associated with the default template.
Now, go to the reading settings and switch to the “static page” option, assigning the cover to the “Home” page and the blog to the “Blog” page. Save your changes and see how the magic has been done!
Enter the list of pages to verify that the “Home” page is the home page and “Blog” is the blog page. Additionally, if you edit them, you will verify that the “Home Page” and “Blog Home” templates have been automatically assigned.
Now, it would be a matter of customizing those two templates to your liking.
Differentiate between presentation and content
As we explain in WordPress and Site Editing: What is the difference between content types and templates, templates should not contain any content, only the structure and blocks such as “Post Content” or loop to display the entries.
Thus, to finish this task of customizing the home page and blog page in the Twenty-Twenty Four block theme, we should edit and modify the “Front Page” template leaving only the header patterns and footer and an intermediate “Post Content” block. Where would we design the home page? Logically, on the “Home” page that was created to set a static page as the home page.
You can copy the blocks from the default “Front Page” template to the clipboard, delete the design and replace it with a “Post Content” block.
Finally, paste the clipboard blocks inside the “Home” page.
Another way to get the original layout of the “Home Page” template is through the pop-up page that is displayed with the available layouts when creating the new “Home” page. There are also the different blocks that make up the design within the patterns that come with the theme.
The Twenty-Twenty Four theme comes with a small “glitch” and that is that the page that displays the posts is assigned by default to a home page.
In this post we have gone over how to customize the home page and blog page in a block theme.
In the event that you only want the blog page as the cover page, we have seen how to fix that small problem, in Twenty-Twenty Four, by altering the “Blog Home” template.
In the event that you want a home page and a blog page, we have reviewed the method, which consists of enabling the “Home Page” template (Front Page) and creating two new empty pages and modifying which one is in the reading settings. static cover page and what is the blog page.