Build your own Genesis child theme for WordPress (Part 2)

Here I am going to show you how to build a static homepage for your own Genesis child theme.  In Part 1 of this series I showed you how to start building your own Genesis Framework child theme. To do this, you could start from scratch and build your child theme from the bottom up. However, it is a lot easier to start from a basic child theme and then modify it as you want. The folks at StudioPress have a Genesis Sample Child Theme which you can use. I used this child theme to start building my very own child theme.

What is a static homepage or static front page? You don’t have to use Genesis to build a static homepage for your WordPress site.  WordPress itself has the capability of creating what it calls a “static front page.”  So what is a static homepage or front page?  By default, WordPress has what is called a blog look.  It may have one or two sidebars, it may have fancy menus and complicated footers. But the main content of the homepage will be the latest “posts” presented in a reverse chronological order. The latest post appears first.

This is because WordPress started out as a blogging platform before it developed into a full fledged content management system and website building platform.  I think the developers of WordPress have left it that way in its default because it forces the website owner to update it on a regular basis (the posts) which is what one wants to do these days, while a static homepage design is – almost by definition – stagnant or stale, an idea that is incompatible with modern websites.

Of course, it doesn’t have to be like that as we will see.  A website with a static homepage can be vibrant and updated, and can also house a blog if that’s what you want.  What a well designed static homepage can and will do is give you much more control of where the different elements of the website are laid out.  If you are building a professional or commercial website with WordPress, then a static homepage is a must.

If you are going to use WordPress’ static front page capabilities, it will be rather simple to do.  All you have to do is create a page named “Home” and then go to Settings ➙ Reading and where it says “Front page displays” you will assign the newly created page as a static page.  Things get complicated when you decide what and where you going to put stuff on that page, but if you look on the web you will find plenty of people showing you how to do that.

Always check the theme you are using first to see if it comes with the built in capability of setting up a static homepage.  If it does and it is of good design it will save you hours and hours of work.

How to set up a Genesis static homepage

Back to the design of our Genesis child theme, if you search this you will also find people that have written about this subject.  For example, Nick the Greek wrote an article on how to design a better homepage with Genesis about a couple of years ago.  Another article of interest was Widgetized Homepage Template in Genesis by Sridhar Katakam (since I wrote this article, Sridhar charges for reading his articles so good luck).

I also found information on non-Genesis articles on the subject of CSS layout of boxes in a web page, such as inline-block.  This is when you want two or more elements or boxes to display horizontally side-by-side on a web page.  According to the CSS Box Model, a box is any HTML element (although more often than not it’s a “div”) that wraps around other HTML elements and consists of margins, borders, padding, and the actual content.  WordPress calls these boxes “widget areas.”  The elements of the box are something like this (graph from W3Schools):

Many ways to do it

There is more than one way to do this and I have tried several models myself.  The results were always not completely satisfactory.  I ran into problems with borders, margins or worse. Even when things looked good the final test was the mobile version because this child theme is mobile responsive.  This is when things fell apart: the homepage would look great on the desktop or laptop and crappy on the smartphone. In this day and age I don’t want a website that is not mobile responsive.

Finally, I ran into an article by Brad Dalton in WP Sites about using Genesis’ built in Bootstrap CSS column classes to set up inline widget areas and it solved my problems.  Since the column classes are built in, any Genesis child theme supports columns. You use or build on your own.

Here is how I did it

Now to the task of building the static homepage:

• Go to Appearance ➙ Editor and open the Theme Functions (functions.php file).  Add the following code, which will register the three widget areas. These are the “boxes” that I want to put in the homepage.  Remember to click “Update File.”

genesis_register_sidebar( array(
 'id' => 'home-top-left',
 'name' => __( 'Home Top Left', 'wpsites' ),
 'description' => __( 'This is the top left section of your site.', 'wpsites' ),
) );
genesis_register_sidebar( array(
 'id' => 'home-top-middle',
 'name' => __( 'Home Top Middle', 'wpsites' ),
 'description' => __( 'This is the top middle section of your site.', 'wpsites' ),
) );
genesis_register_sidebar( array(
 'id' => 'home-top-right',
 'name' => __( 'Home Top Right', 'wpsites' ),
 'description' => __( 'This is the top right section of your site.', 'wpsites' ),
) );

• Make an empty text file named home.php and upload it to the child theme subdirectory.  In my case it was:/wp-content/themes/olney-oaks/.  Normally WordPress loads the file index.php, which contains the WordPress loop, when creating your homepage.  However, if home.php exists it will load it instead.

• Now in your administration go to Appearance ➙ Editor.  You will see that home.php is in the list of files on the right hand margin. You can edit it from here.  Open home.php and put the following content in it (make the necessary edits with your name, etc.).  Of course, you could put this content in it before you upload it. However, I wanted to show you that it can be edited from inside the WordPress administration.  Remember to click “Update File.”  What this code basically does is create a function that will activate the three boxes you just registered. It will insert them under the header and the menu.  It also removes the genesis loop and the genesis sidebar; otherwise, these will appear under the three boxes.

<?php
/*** Home Page
*
* @theme		Olney Oaks
* @author		Roberto Fernandez Larsson
* @copyright		Copyright (c) 2014, Roberto Fernandez Larsson
* @link			https://discussingwp.com
* @license		http://opensource.org/licenses/gpl-2.0.php GNU Public License
*
*/

add_action( 'genesis_after_header', 'wpsites_inline_widgets' );
/**
* @author Brad Dalton
* @example http://wpsites.net/
* @copyright 2014 WP Sites
*/
function wpsites_inline_widgets() {

        echo'<div class="inline-widgets wrap">';
        
        if ( is_front_page() )

	if ( is_active_sidebar( 'home-top-left' ) || is_active_sidebar( 'home-top-middle' ) || is_active_sidebar( 'home-top-right' ) ) { 
	
	genesis_widget_area( 'home-top-left', array(
		'before' => '<div class="one-third first widget-area">',
		'after'  => '</div>',
	) );

	genesis_widget_area( 'home-top-middle', array(
		'before' => '<div class="one-third widget-area">',
		'after'  => '</div>',
	) );

	genesis_widget_area( 'home-top-right', array(
		'before' => '<div class="one-third widget-area">',
		'after'  => '</div>',
	) ); 
	
	echo'</div>';
	
	}

}

remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );
remove_action( 'genesis_loop', 'genesis_do_loop' );

genesis();

• Next open the Stylesheet (style.css file) and add the following code. Remember to click “Update File.”

.inline-widgets  {
    margin-top: 25px;
}

The results

Go to your browser and refresh the homepage. You will see something like this:

Actually you will not see any of the boxes until you go to Appearance ➙ Widgets and put some content in those widget areas.  I put text widgets in there to provide content for this demonstration.  Notice that the three footer widget areas are still there.  This is because they are outside the loop, therefore removing the loop did not affect them.  Remember that if you don’t want any of these widget areas all you have to do is leave them empty and they disappear.

Conclusions

I finally found an easy way of creating a Genesis static homepage with ease.  Creating a static homepage is essentially removing the WordPress loop (the code used by WordPress to display your posts), removing the sidebar(s), and putting a number of widget areas to replace them.  This is the easy part; making the widgets areas and the widgets you put in them look good is an entirely different matter.  In my next article in this series I will cover that subject, how to put different number of widget areas in the same row, and other useful widgets you can put in the homepage, for example, above the header.