[Tutorial #15] Home Page Parts I

[Tutorial #15] Home Page Parts I


In last tutorial we explained the main home page template structure. Now we look at home page’s various components and techniques we use in ModernBlackHand website. The following is the list of techniques we will cover:

  • Advanced Custom Fields.
  • Parallax image.
  • Post listing.
  • Styling.


The code

The file can also be found in my Github page:


As mentioned in the previous tutorial, the hero section is to grab viewer’s attention in short time frame. Thus the content should be as simple as possible (yet intriguing). Typical elements of a hero section are (we will explain them in detail later in this post):

  • A relevant, attracting image (not in here).
  • Main description (line 21).
  • Sub description (line 22).
  • Button linked to action (not in here).

We will illustrate using advanced custom fields (ACF) in content-hero.php.

Using Advanced Custom Fields (ACF)

The coding procedures of using ACF is as simple as follows:

  1. Get ACF fields.
  2. Display them in HTML.
  3. Create corresponding ACF fields in admin panel.

Get ACF Fields (line 2-4)

Getting ACF variables is in line2-4 in content-hero.php. What these codes do are:

  1. Get the field by function get_field(...);
  2. Assign the field to local variables like $hero_section_title .

The parameter for function get_field() is the “Field Name” described below when we create fields in admin panel.

It’s good practice to first assign fields to local variables and use local variables to display the field content:

  • It makes clear what fields you use in this template.
  • It’s easier to change when field names change.

Be aware of the $ sign:  that’s the standard way in PHP to define a variable. Also be aware that these codes are within the <?php ?> bracket.

Display ACF Fields in HTML (line 21-22)

The codes to display ACF Fields in HTML depend on the field type (text, image, video). For type “text” and “text area” it is easy: simply use:

<?php echo $variable_name ?>

Create corresponding ACF fields in admin panel

The procedure of creating ACF fields for home page template is as follows:

Click “Custom Fields -> Custom Fields, then “Add New”

WP Custom Field Add New

WP custom field new field group

Configure Field Group

  1. Input an easily recognized title (eg: “Home”).
  2. At the “Location” section, choose “Show the field group if” to “Page Template”, “is equal to”, “Home Page”. (If the home page template option did not show up, check your page-home.php configuration.)

WP ACF title and field group

Add Fields

Click the blue “Add Field” button. Setup field as follows:

  • “Field Label”: enter easily recognizable name.
  • Then “Field Name” should automatically appear. If not choose a name according to the rule.
  • “Field Type”: select “Text” for shorter text like header text, and “Text Area” for longer text like paragraph text.
  • Setting up other optional properties.

WP ACF field

Click the Blue “Publish” Button

Other Codes Explanation

Center-align Bootstrap Grid (line 20)

Here is a brief explanation of the Bootstrap grid classes col-sm-6 : a small/medium column of length 6. col-sm-offset-3 : means it is offset from the left by 3. Since the remaining length is 12 - 6 - 3 = 3, this means that this setting center-aligns the column element.

The general formula for center-aliging a Bootstrap column is as follows:

col-sm-x col-sm-offset-y , where y = (12-x)/2 


WordPress’ styling is in style.css. One can find it on my Github page. To find the styling specific to content-hero.php, try search for its classes like “hero” or “hero-content-overlay”.

Here are some of the relevant CSS styling:

  • I specified a minimal height by the attribute min-height to have sufficient black background space.
  • Using position: relative in #hero and position: absolute in .hero-content-overlay situates the text approximately at the middle of the black background.