In last few tutorials we modify
footer.php . Now let’s tackle the gateway of our websites: the 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.
As a review, the process of setting up a page is as follows:
- Create the home page template.
- Create home page field group in Advanced Custom Fields plugin.
- 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
Divide & Conquer
WordPress provides nice functions to make home page modular. Below is ModernBlackhand’s super simple home page template code:
Template Name: Home Page
<?php get_template_part('content','hero'); ?>
<?php get_template_part('content','newpost'); ?>
<?php get_template_part('content','projects'); ?>
<?php get_footer(); ?>
Line 2-4: Description
The description here between
?> 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.
get_template_part('content','hero'); looks for the file named
content-hero.php and includes its content.
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.