[Tutorial #18] Home Page Part 4 — Wrap Up

[Tutorial #18] Home Page Part 4 — Wrap Up


In the past few tutorials we have introduced various techniques  for creating home page. We will wrap up home page creation by examing the last partial template: content-projects.php .

The Code

The file can also be found here on my Github:

Code Explanation

Line 2-12: Getting Advanced Custom Fields

See this tutorial for reviewing ACF usage.

Line 14-21: Parallax Image Header

See this tutorial for reviewing parallax effect usage.

Line 23-92: Bootstrap 2-row 2-column setup

See this tutorial for reviewing Bootstrap’s grid system. There are two row classes and two col-sm-6 classes.

Line 30-33: Make entire area clickable to corresponsing pages

See here for reviewing how to do it with HTML and CSS.

Line 35-37: Inverse color technique

Here we inverse the image color when the mouse hovers. The CSS code is as follows:

Here :hover tells the website to apply the style in the bracket when the mouse hovers.

The CSS filter property applies simple graphical effects to the specified tag (like instagram filter). You can use this link to play with various effects online.

The -webkit-filter is a CSS property specific for the webkit rendering engine used by Safari/Chrome. Adding this besides the regular filter property ensures this CSS effect is supported in different browsers.

You can further add Mozilla CSS for better support in Firefox browser.

Line 35-37: Image centering in a changing-size area

When using Bootstrap, areas can be resized by changing browser’s width. Thus we have to make sure the background image remains centered after resizing. Here is the CSS codes of doing so:

Create a Home Page

It’s time to create our home page in the admin panel. Simply go to Pages ->  Add New , enter “Home” as title, and select “Home Page” as template. Publish it.

Then go to Settings -> Reading . Set Front Page Display to A Static Page and Choose your home page.