Introduction
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<?php //Advanced Custom Fields. Required: Advanced Custom Fields Plugin $topics_bg_style = get_field('topics_bg_style'); $topics_section_title = get_field('topics_section_title'); $topic_iot_title = get_field('topic_iot_title'); $topic_iot_text = get_field('topic_iot_text'); $topic_cycling_title = get_field('topic_cycling_title'); $topic_cycling_text = get_field('topic_cycling_text'); $topic_web_title = get_field('topic_web_title'); $topic_web_text = get_field('topic_web_text'); $topic_beer_life_title = get_field('topic_beer_life_title'); $topic_beer_life_text = get_field('topic_beer_life_text'); ?> <section id="topics" class="topic-image parallax-bg" data-type="background" data-speed="2" style="<?php echo $topics_bg_style ?>" > <div class="topic-text"> <h1><?php echo $topics_section_title; ?></h1> </div> <!-- project-head --> </section> <section id="project"> <div class="container"> <div class="project-body"> <div class="row"> <div class="col-sm-6"> <div class="project-block"> <!-- link block to corresponding pages --> <a href="/index.php?cat=5"> <span class="link-spanner"></span> </a> <div class="block-img-window"> <img class="block-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/home_topic_iot.png" alt="Project"> </div> <h3><?php echo $topic_iot_title; ?></h3> <p><?php echo $topic_iot_text; ?></p> </div> </div> <div class="col-sm-6"> <div class="project-block"> <!-- link block to corresponding pages --> <a href="/index.php?cat=6"> <span class="link-spanner"></span> </a> <div class="block-img-window"> <img class="block-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/home_topic_cycling.png" alt="Project"> </div> <h3><?php echo $topic_cycling_title; ?></h3> <p><?php echo $topic_cycling_text; ?></p> </div> </div> </div> <!-- row 1 --> <div class="row"> <div class="col-sm-6"> <div class="project-block"> <!-- link block to corresponding pages --> <a href="/index.php?cat=8"> <span class="link-spanner"></span> </a> <div class="block-img-window"> <img class="block-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/home_topic_web.png" alt="Project"> </div> <h3><?php echo $topic_web_title; ?></h3> <p><?php echo $topic_web_text; ?></p> </div> </div> <div class="col-sm-6"> <div class="project-block"> <!-- link block to corresponding pages --> <a href="/index.php?cat=7"> <span class="link-spanner"></span> </a> <div class="block-img-window"> <img class="block-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/home_topic_beer.png" alt="Project"> </div> <h3><?php echo $topic_beer_life_title; ?></h3> <p><?php echo $topic_beer_life_text; ?></p> </div> </div> </div> <!-- row 1 --> </div> <!-- project-body --> </div><!-- container --> </section> |
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:
1 2 3 4 |
div.project-block:hover{ -webkit-filter: invert(100%); filter: invert(100%); } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.block-img-window{ position: relative; margin-left: auto; margin-right: auto; margin-top: 30px; width: 80%; padding-bottom: 60%; overflow: hidden; } .block-img{ /* centering */ position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; /* scale to make image smaller*/ height: 250px; width: auto; } |
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.