Today, we’ll go through the ultimate guide to setting your WordPress homepage.
This simple task might seem straightforward. In fact, I just walked through a tutorial with the Twenty Twenty-Four theme by WordPress, where they’ve made it simple to craft a homepage layout design visually.
However, that’s not the case with the thousands of other themes that people have installed on their existing WordPress websites — especially classic ones without visual block editing.
It can be quite perplexing to figure out where to set the homepage design and how to do it because this process is entirely dependent on the theme you have installed… plus there are multiple ways to do it.
You need a basic understanding of the WordPress template hierarchy.
So, if this is something that has confused you in the past, let’s address the technical elements of assigning your homepage in WordPress!
Homepage Precedence Flow Chart
I tried to cover every possible scenario and created a flowchart to illustrate the complexity of the template hierarchy.
You can grab a copy of this flow chart below.
Let’s explore these cases so you can gain a comprehensive understanding of how WordPress actually serves the homepage.
The initial question to consider is — Does the active theme support full-site editing?
If the answer is yes, it’s as straightforward as creating a front page template, which may or may not be included in your block theme. This full-site editing feature was introduced with the core WordPress software in 2022.
Let’s head back to our WordPress dashboard.
Old vs. New WordPress Block Theme
Navigate to the appearance section, where you’ll find several themes I’ve installed.
The easiest way to determine if full-site editing is enabled is to look at your admin menu on the left. If all you see under the “Appearance” menu is “Themes” and “Editor,” it means your active theme has visual editing capabilities built-in.
All the options that used to reside under this “Appearance” menu are now accessible through the newer visual editor.
Now, let’s say we activate an older theme like GeneratePress, which doesn’t have full-site editing built-in by default. You’ll notice the additional options “Customize,” “Widgets,” and “Menus.”
Older themes may also include their own theme options page.
In the past, theme customization primarily occurred through a page like this where you’d select settings, rather than using a drag-and-drop style visual editor.
“Front Page” Template
Let’s reactivate the Twenty Twenty-Four theme and head to our editor. From there, we’ll navigate to the “Templates” section. Here, you’ll find a list of our templates. If we want to view them all, we can click on “Manage All Templates” to see them displayed in a larger panel.
Right now, we don’t have a “Front Page” template. Instead, our homepage is being managed by the “Blog Home” template. You’ll soon see the distinction between them.
If you wish to create a completely new homepage, you can click “Add New Template” and select the “Front Page” template.
This is the easiest solution since it takes precedence over everything else!
Setting a Custom Homepage
When we don’t have a front page template, the next question is — Is the custom homepage set?
This is a WordPress setting that I utilize quite often, especially when building small business websites.
By default, WordPress displays blog posts on the homepage, which isn’t always desirable. To adjust this setting, navigate to the “Settings > Reading” section. Here, you can assign an existing WordPress page to display as your homepage.
Then you’ll designate what page will be used to show your blog posts.
After saving these changes, take a look at your homepage to see what’s changed.
WordPress Template Hierarchy
Everything we’re discussing today ties back to the WordPress theme template hierarchy.
Previously, this was managed through PHP files, which we’ll see shortly after we activate an older theme. Nowadays, it’s handled through the visual editor with block themes, like Twenty Twenty-Four.
Here’s the WordPress developer page where the graphic above is embedded. Before block themes became prevalent, you’d have to edit or add raw PHP files within your child theme to customize. Each of them is responsible for generating specific pages on the front end.
Essentially, we follow this hierarchy from left (page type) to right (the PHP file that can generate that page).
What we just demonstrated was the “Site Front Page” type in the hierarchy. If we utilize the “Front Page” template in a block theme or edit the front-page.php file, that will take precedence.
If there is no front page template and we manually select a page to display on our homepage from the WordPress settings, it’s governed by the “Page” template.
This is exactly what you saw in the previous two sections!
Navigating further down the hierarchy, we encounter fallbacks such as home.php, which we’ll explore in a moment, and everything defaults to index.php.
Confused, yet? 😆
“Blog Home” Template
Now, returning to the visual editor, you’ll notice that our original homepage layout was run by the “Blog Home” template. The description indicates that this template showcases the latest posts, serving as either the site homepage or the posts page (if you selected a different page under the reading settings).
In our case, we have a completely custom layout here without blog posts. Instead, it’s a custom-built full-width layout that comes pre-packaged with the Twenty Twenty-Four theme.
Looking at our flowchart, the basic hierarchy order goes like this…
Front Page template (front-page.php) > Page template (page.php) > Blog Home template (home.php)
If you don’t have a Front Page template, your homepage will use whatever page is set from the WordPress reading settings.
If you don’t have a Front Page template and the homepage isn’t set from the reading settings, it’ll use your Blog Home template.
Templates with Dynamic Content
Another complicating factor to consider is the presence of dynamic content.
Even if your template is structured like the Front Page template, there’s a possibility that includes the “Post Content” block.
This situation can create a hybrid scenario where you visually edit the Front Page template to alter the design, but some of the content is coming from the page within WordPress you set as the homepage from the reading settings.
Child Theme Without Full Site Editor
Let’s now explore a theme that doesn’t have full-site editing enabled.
Returning to the appearance theme section, let’s activate Twenty Twenty-One, the last theme developed by WordPress without visual editing built-in.
Upon activation, you’ll notice our Appearance menu options indicating that full-site editing is not enabled on this site.
Referring back to our flowchart, the first question to consider now is whether or not a child theme is installed.
This is crucial because you will be editing PHP files directly, which was the norm for template customization before visual editing.
If you don’t have a child theme installed, your customizations will be overwritten whenever a theme update is released.
This is why a child theme is so important. Essentially, a child theme utilizes all the template files from the parent theme, unless you specifically copy any into your child theme and edit them. In that case, your child theme’s customizations will be used instead of those in the parent theme.
Installing a child theme is quite simple to do, especially with older themes. You can find instructions on how to set up a child theme either manually or through a plugin.
A child theme only requires two files — functions.php and style.css.
Customizing Child Theme PHP Templates
Let’s proceed with what we accomplished above, except we’re using an older theme that requires PHP modifications.
If front-page.php doesn’t exist, we can create it ourselves. To do this, let’s open up FileZilla, my preferred FTP program, to access our web server directories.
Navigating through FileZilla, we’ll go to the “wp-content/themes” folder where all our themes reside. If you’ve created a child theme, you’ll find a separate directory for it, typically named after the parent theme with “-child” appended to the end of the folder name.
Go into your parent theme directory, and copy one of the existing template files to your local computer, then edit it with your favorite code editor.
Recalling the template hierarchy, if we have a custom homepage set, it will utilize page.php — the template that governs all our pages. And if the custom homepage isn’t set, we can create home.php.
To create front-page.php, I recommend copying either index.php or page.php from your parent theme.
Let’s open up the file in Notepad++.
The PHP template consists of WordPress functions to retrieve the header and footer. These tasks have now been streamlined in the visual builder through the use of template parts and blocks.
The page’s content is generated by a “while” loop, which requires some coding knowledge to customize.
Then you can manually add HTML code anywhere within these templates, and if styling is required, you’d update the child theme’s style.css file accordingly.
Once you make a few edits, try renaming front-page.php to home.php, and you’ll learn firsthand how the template hierarchy is operating.
Go Customize Your Website Homepage!
I understand this process can seem intricate, and even more confusing while being explained in a text format like this blog post, so I advise you to watch the video tutorial, too.
But it’s manageable when you test it on your own website. Simply examine your homepage’s content and work backward to identify its source.
Then test things out by putting unique HTML/PHP code into your custom files. When you refresh to see what’s on the homepage, you’ll start to cement your understanding of how these little changes are affecting your front-end!
If you are new to WordPress, I highly recommend selecting a block theme from day one, such as Twenty Twenty-Four. This way, you can construct everything visually, and you don’t have to worry about hacking PHP files!