
This article, updated for WordPress 6.6 (July 2024) , explains how to customize the home and blog pages in a block theme like Twenty-Twenty Four. To set up 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 one wants to have both pages, one must create a home page template and associate the home page to it in the reading settings. Then, one must edit both templates to customize them. Also, it should be noted that the templates should not contain any content, only the structure and blocks to display the content.
Also, corresponding video tutorials have been added to make the setup process easier to understand .
One of the things you need to consider when installing a theme is customizing the home and blog pages. Let’s say you want to create a website that has both of these pages.
How it was done in a classic theme
Traditionally (before Gutenberg), this was done by changing the “Front Page Settings” option in a classic theme’s customization. There, you could choose what to display on your site’s front page. This could be posts in reverse chronological order (what we all understand as a blog) or a fixed/static page. To set a static front page, you first had to create two pages. One became the front page, and the other was where your posts would be displayed. If you didn’t do the latter, the default page was usually the page with the latest blog posts.
However, this all depends on the classic theme being set up. For example, in Twenty Seventeen there is a default configuration prepared, through the “Home page settings” option, within the theme customization ( see video 1 ). This video shows how when you go to the theme customization option, you have prepared pages in the drop-down menus (which we have not created ourselves) and which are created at the time of “publishing” the changes.
If the Classic theme does not have the home and blog pages ready, you will have to create them yourself before going to the Customize – Home Page Settings option.
But what interests us, in this article, is how to configure the home and post pages in a block theme , using the site editor.
How to do it in a block theme
The site editor uses default templates and templates you can create to set up and customize your home and blog pages.
How it’s done in Twenty-Twenty Four
Let’s see how to determine and adjust the home and blog pages in the Twenty-Twenty Four block theme. Although this is a specific case, the method is perfectly valid with any block theme. The only thing you will have to see is which templates you have activated by default, but the operation of these belongs to the WordPress core.
Setting the blog as the home page
By default, Twenty-Twenty Four associates the Blog Home template with the front page ( see video 2 ). If you go to the preview of this 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 posts are displayed on that home page. ”
Indeed, if we go to the reading settings (Settings > Reading), we will see that “Your home page shows” has the “Your latest posts” option enabled. However, by default this is false in Twenty-Twenty Four. A small trick that needs to be corrected immediately.
The method to solve this immediately is to edit the “Blog Home” template, go to the “Template” tab in the settings on the right column, click on the “Design” section and choose the “Blog Index Template” template.
After that small change, we will have the blog set as the home page. And the reading settings match what we want.
Setting a static page as the home page
If we don’t want the blog as the homepage, 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 “Design” section and choose the “Business Homepage Template” template again.
But if what we want is to have a home page and a blog, then we can choose the following ( see video 3 ):
First, create the “Front Page” template. In the preview, this template is explained as follows: “ Displays the front page of your site, whether it is set to display the latest posts or is a static page. The front page template takes precedence over all templates. ” Before continuing, remember that you can choose the predefined layout of your front page, from those offered in the “Design” section, within the “Template” tab.
Check that it is not the blog’s own. You already know that you can edit it by going back to the “Template” tab in the settings on the right column. Then click on the “Design” section and choose the template you want. You can even edit it to your liking by adding or removing blocks.
Next, create two new pages: Home and Blog. At first, leave them empty and associated with the default template.
Now, head over to your reading settings and switch to the “static page” option, assigning the front page to the “Home” page and the blog page to the “Blog” page. Save the changes and check out how the magic has been done!
Go to the list of pages to check that the “Home” page is the home page and “Blog” is the blog page. Also, if you edit them, you will see 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.
Differentiating between presentation and content
As we explained in WordPress and Site Editing: What’s the Difference Between Content Types and Templates , templates should not contain any content, just the structure and blocks like “Post Content” or the loop to display posts.
So, to finish this task of customizing the home page and the blog page in the Twenty-Twenty Four block theme, we should edit and modify the “Front Page” template, leaving only the header and footer patterns and an intermediate “Post Content” block ( see video 4 ). Where would we design the home page? Logically, on the “Home” page that was created to establish a static page as the home page.
You can copy the blocks from the default “Front Page” template, except the header and footer, to the clipboard, delete them and replace them with a “Post Content” block.
Finally, paste the clipboard blocks into the “Home” page.
For layouts that are assigned to a specific template (such as “Blog Home”), it doesn’t make sense to implement the separation between presentation and content, as this is a special page and is often unique. Strictly speaking, this could also be done, but the “Blog” page would need to be assigned to a specific template other than “Pages.” In that specific template, the “Contents” block would be inserted between the header and footer blocks, and the group block would be moved to the “Blog” page.
Final Thoughts
In this post we have reviewed how to customize the home page and the blog page in a block theme.
In case you only want the blog page as the front page, we have seen how to fix that little problem, in Twenty-Twenty Four, by altering the “Blog Home” template.
In case you want a home page and a blog page, we have reviewed the method, which consists of enabling the “Front Page” template and creating two new empty pages, modifying -in the reading settings- which is the static front page and which is the blog page.
I read you in the comments.
Leave a Reply