Using a custom page as a home page

The default WordPress home page consists of a list of blog posts on the site. The content for the home page is generated within WordPress and is not visible as a post or page in the dashboard. Most sites will require a unique home page that describes the site, rather than a set of blog posts. So, we need the option of changing the default behavior.

The main settings section of WordPress allows us to customize the default behavior and define a custom home page. In this recipe, we are going to look at the process of changing the home page from the default blog post list to a custom page.

Getting ready

We need to have a custom static page as the home page of the site. Follow these steps to create a new page:

1. Log in to the WordPress Dashboard as an administrator.
2. Click the Pages menu.
3. Click the Add New button to create a page.
4. Add a title of Home and add Home Page as content.
5. Click the Publish button to create the page.

This will create a new empty page that will be used as the home page of the site.

How to do it...

The process of changing the home page and customizing the blog page is a straightforward task. Follow these steps to configure the home page:

1. Log in to the WordPress Dashboard as an administrator.
2. Click the Settings menu.

3. Click the Reading option. You will get a screen similar to the following called Reading Settings:

We'll be using the Your homepage displays setting for this process. The Your latest posts option will be selected by default to show the blog posts on the home page.

4. Select the A static page (select below) option.
5. Select the page we created in the Getting ready section as the home page.
6. Select another page for the Posts page option and use it as the blog posts page.
7. Click the Save Changes button.

Now, visit the home page of the site by clicking on the site title. You will see the new page we created in the Getting ready section with the content as Home Page. Also, you can go to the Pages list and click on the page we used for the Posts page setting to view the list of blog posts.

We have changed the home page successfully and used a custom page. Now, you can add home page content that's specific to your site by modifying the custom page we created in the Getting ready section.

How it works...

The setting for displaying the front page is stored in the wp_options table in the database with a key called show_on_front. The default value is posts. Therefore, the blog post list will be shown on the front page. Once we select and save the A static page (select below) option, the value of show_on_front will change to page.

Next, the Homepage and Posts page options will be saved in the wp_options database table with the page_on_front and page_for_posts keys. Once pages have been selected for these settings, the page_on_front and page_for_posts keys will hold the respective page IDs. The default value will be 0 for these settings.

Once the user request is sent for the front page, WordPress will use page_on_front to load the respective page as the home page. Also, when the blog post page is clicked, WordPress will check if the requested page is defined in the page_for_posts setting. Once a match has been found, it will display the list of blog posts.

There's more...

Once we select a page to be used for the posts page, WordPress will override the content of that page with the blog post list. The content of the page won't be visible anywhere on the frontend of the site.

Also, we may choose the same page for both the Homepage and Posts page settings by mistake. In such a case, a warning message will be displayed. If we continue using the same page without considering the warning, WordPress will load the blog posts list as the front page.