Web - [Tutorial #18] Home Page Part 4 - Wrap Up

Contents

Introduction
The Code
Code Explanation

Line 2-12: Getting Advanced Custom Fields
Line 14-21: Parallax Image Header
Line 23-92: Bootstrap 2-row 2-column setup
Line 30-33: Make entire area clickable to corresponsing pages
Line 35-37: Inverse color technique
Line 35-37: Image centering in a changing-size area

Create a Home Page

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:

<?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>

<?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>

</section>

</a>

<img class="block-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/home_topic_iot.png" alt="Project">

</div>

</div>

</a>

<img class="block-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/home_topic_cycling.png" alt="Project">

</div>

</div>

</div>

</a>

<img class="block-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/home_topic_web.png" alt="Project">

</div>

</div>

</a>

<img class="block-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/home_topic_beer.png" alt="Project">

</div>

</div>

</div>

</div>

</div>

</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:

div.project-block:hover{
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

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:

.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;	
}

.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.

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

Introduction

The Code

Code Explanation

Line 2-12: Getting Advanced Custom Fields

Line 14-21: Parallax Image Header

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

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

Line 35-37: Inverse color technique

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

Create a Home Page

Subscribe My Newsletter

Simply enter your name and email to receive our latest posts: