[Tutorial #14] Home Page: Introduction

[Tutorial #14] Home Page: Introduction


In last few tutorials we modify header.php and footer.php . Now let’s tackle the gateway of our websites: the home page.

wp home page

Modern Black Hand’s home page.

What’s in the Home Page?

Building a home page is like selling things to other. The fundamental goal a home page does is:

To get targeted audience do what you want them to do.

With this goal, at minimum the home page should get your target audience’s attention.

Once you grab your target audience’s attention, you can explain more about your website at home page’s subsequent content for users to scroll down. It’s ok to have a long content in your home page, as long as your home page gives what targeted customers want.

Following above guidelines, here are some possible content types to show on the home page:

  • Hero section: include background images/videos and a short sentence about your site, or call to action. Bootstrap’s Jumbotron is useful.
  • Testimonies: display customer feedback or custom logos. Bootstrap’s carousal is good for this.
  • Product category: display summary of your products or website content. Bootstrap’s grid is useful to arrange the category.
  • Forms: to gather viewers’ contact for subsequent actions. Bootstrap also has better looking forms to use for.

You should think about the sales process for your products or content and arrange home page content accordingly. Doing experiment is expected. This means that a modular procedure of building home page is a good idea.

Setting Up

As a review, the process of setting up a page is as follows:

  1. Create the home page template.
  2. Create home page field group in Advanced Custom Fields plugin.
  3. Add new page from admin panel.

Step #1 and #2 must cooperate with each other. We recommend that we first build the website without ACF. Once we see the home page works we can start substitute some components to use ACF fields.

Home Page Template Naming Rule

For wordpress to recognize your home page template and show it on the admin panel, you should use the file syntax page-slug.php .

Divide & Conquer

WordPress provides nice functions to make home page modular. Below is ModernBlackhand’s super simple home page template code:


Code Explanation:

Line 2-4: Description

The description here between <?php and ?> is for documentation. You can find the standard specification in wordpress Codex page here.

Line 5: get_header()

This function includes header.php content into home page.

Line 6-8: get_template_part()

These three lines include the partial template files that we use to divide home page codes into three partial templates.

The function get_template_part('content','hero'); looks for the file named content-hero.php and includes its content.

Using get_template_part() makes our home page modular and easy to maintain and modify, as we can just go to one partial template file and change stuff. It also makes it easy to reorder home page content.

Line 11: get_footer()

This function includes footer.php content into home page.