Create a Widgetized Custom Home Page in Genesis Child Theme WordPress

Creating a customised all widgets / widgetized home page of a Genesis Child Theme.

Analysing the Layout

genesis-widgetised-home-page

The layout above does not lend itself to the default layouts in Genesis, it really needs to be set up with widgetised areas in the WordPress dashboard so a non-technical user can update content.

genesis-widgets-fixed-area

3 Fixed Widgetised Areas

The layout is a mix of column widths and heights, I know that the top three areas will be the same width and height which can have 3 fixed widget areas, but the bottom areas content will have varying heights, and can be dealt with by 2 widget areas one will have 1/3 column content  on the left and the 2nd column will contain the remainder 2/3rds column content on the right.

Genesis CSS mark up contains CSS column classes that can deal with this.

genesis-widgets-flexible-area

1 column depth varying and 2 Column Widgetised Areas

Creating The Widgets

So 5 widgets need to be created in the functions.php file and an action declared to register the new widgets

<?php //<~ don't add me in
add_action( 'widgets_init', 'ng_genesis_home_widgets' );
/*
* Add in Home Widget Areas
*/
function ng_genesis_home_widgets() {
genesis_register_sidebar( array(
'name' => __( 'Home Content Top Left', 'genesis' ),
'id' => 'content-1',
'description' => __( 'Top Left Home', 'genesis' ),
) );
genesis_register_sidebar( array(
'name' => __( 'Home Content Top Middle', 'genesis' ),
'id' => 'content-2',
'description' => __( 'Top Middle Home', 'genesis' ),
) );
genesis_register_sidebar( array(
'name' => __( 'Home Content Top Right', 'genesis' ),
'id' => 'content-3',
'description' => __( 'Top Right Home', 'genesis' ),
) );
genesis_register_sidebar( array(
'name' => __( 'Home Bottom Left Side', 'genesis' ),
'id' => 'content-4',
'description' => __( 'Home Left', 'genesis' ),
) );
genesis_register_sidebar( array(
'name' => __( 'Home Bottom Right Side', 'genesis' ),
'id' => 'content-5',
'description' => __( 'Home Right', 'genesis' ),
) );
}

In the code above a unique function name is given; ng_genesis_home_widgets() and the widgets also need unique ‘id‘, a name and description. Also declared in the code is the surrounding HTML mark up of the widget area which includes a generic h3 tag and class widgettitle and a surrounding div element with a class of homecontent this would allow for generic styling of all widget areas.

The add_action below the function in the above code declares the widgets for use with widgets_init and  the new custom function genesis_home_widgets

 

Seeing The Widgets in the WordPress Dashboard

Once the new widgets function is declared you can see the widgetised areas in the backend ready to take on content

genesis-widget-areas-ready

Positioning The Widgets on the Page

One of the last trips back to functions.php file is to place the widgets in the area we want, in this case I just want them on the home page only, and to do that we need to create another unique function and action including more HTML mark up and CSS classes.

//* Add the home widgets in place

function ng_home_page_widgets() {
 	if ( is_front_page('') )
	genesis_widget_area ('content-1', array(
		'before' => '<div class="one-third first hometopcol toplefthome">',
		'after' => '</div>',));
	if ( is_front_page('') )
	genesis_widget_area ('content-2', array(
		'before' => '<div class="one-third  hometopcol topmiddlehome">',
		'after' => '</div>',));
	if ( is_front_page('') )
	genesis_widget_area ('content-3', array(
		'before' => '<div class="one-third  hometopcol toprighthome">',
		'after' => '</div>',));
	if ( is_front_page('') )
	genesis_widget_area ('content-4', array(
		'before' => '<div class="one-third first bottomlefthome ">',
		'after' => '</div>',));
	if ( is_front_page('') )
	genesis_widget_area ('content-5', array(
		'before' => '<div class="two-thirds bottomrighthome">',
		'after' => '</div>',));
	}

add_action( 'genesis_before_content', 'ng_home_page_widgets' );

So a new function is created ng_home_page_widgets and if the page is the home page the widgets will be published, the add_action below the function in the code above actually makes it happen and positions it, the widgets will be positioned before the general page content by the Genesis hook – genesis_before_content

If the page you need is not the home page just get its ID and use that number in place of home. 

Alternatively and probably better is to use an actual front page template, WordPress recognises a front page by the use of a front-page.php template in your theme folder, this way you don’t need a conditional statement and managing the front page is easier, what you do have to do is set the front page via the Dashboard – Settings > Readings – so you could use template like the below…

<?php //<~ Add me in
add_action( 'genesis_before_content', 'ng_home_page_widgets' );
/*
* Add the home widgets in place
*/
function ng_home_page_widgets() {
genesis_widget_area ('content-1', array(
'before' => '<div class ="one-third first hometopcol toplefthome">',
'after' => '</div>',));
genesis_widget_area ('content-2', array(
'before' => '<div class ="one-third hometopcol topmiddlehome">',
'after' => '</div>',));
genesis_widget_area ('content-3', array(
'before' => '<div class ="one-third hometopcol toprighthome">',
'after' => '</div>',));
genesis_widget_area ('content-4', array(
'before' => '<div class ="one-third first bottomlefthome ">',
'after' => '</div>',));
genesis_widget_area ('content-5', array(
'before' => '<div class ="two-thirds bottomrighthome">',
'after' => '</div>',));
}
genesis();
view raw front-page.php hosted with ❤ by GitHub

CSS Column Classes, Responsive Width

Most important of the CSS classes is using  Genesis column classes; ‘one-third‘ and ‘two-thirds‘ which create the widths in percentages so the content will be responsive – but these also have a margin left value which we don’t require on the leftmost widgets to negate this an extra class of first is applied to the 2 left most widget areas, this class is already defined in Genesis default CSS.

.first {
margin-left:0px;
}

This would then leave us with 100% wide areas.

genesis-widgets-fixed-area-100-percent genesis-widgets-100-percent

The Genesis column classes are set to be varying percentages at viewports over 767px (iPad portrait is 768px), so any device below this width will have its column flex to 100%.

So now the front end home page would appear like so…

genesis-custom-home-page

 

…. all ready for mass widgets and CSS creativity. The last thing would be to hide the main content div of that actual page so the widgets are only surrounded by the header and footer.

.home .content {
	display: none;
}

genesis-custom-home-page-no-content

Rather than hide the content you can remove it based on it being the home page, this is done via a conditional tag and then removing the Genesis loop markup for that page.

<?php <?php //<~ don't add me in
/**
* Remove Home Page Loop
*
* @package Remove Home Page Loop
* @author Neil Gee
* @link http://wpbeaches.com/creating-widgetized-genesis-home-page/
*/
add_action( 'genesis_before','remove_homepage_content' );
function remove_homepage_content() {
if (is_front_page() ) {
remove_action( 'genesis_loop', 'genesis_do_loop' );
}
}
view raw removehome.php hosted with ❤ by GitHub

Add in some CSS…

/***************Main Background*********/
.site-container {
	background: #fff;
}
.site-inner {
	padding-top:0px;

}
/***************Generic Widget Styling********/

.homecontent {
	color:#7e7467;
	font-size: 16px;
	line-height: 1.3;
	box-shadow:1px 2px 5px 0px rgba(0, 0, 0, 1);
	margin-top: 25px;
	position: relative;
}
/***************Inner Widget Styling********/
.textwidget {
	padding: 12%;
	text-align: center;
}
.hometopcol {
	margin-top: 0px;
        height:280px;
}

/***************Widget Headers*********/

.widgettitle {
	color:#c4421b;
	padding: 15px 0px 0px 15px;
	border-bottom: 4px solid rgba(162, 152, 135, 1);
	margin-bottom: 10px;
	text-transform: none;
	font-size: 16px;
}

.widgettitle:after {
	content: " ";
	position: absolute;
	top: 43px;
	left: 5px;
	right: 5px;
	border: 1px solid rgba(162, 152, 135, 1);
}

And it’s starting to take shape….

genesis-structured-home-page

 

Forcing the Sidebar to go Away

Some themes like Magazine Pro have the sidebar forced, you can comment out the code in front-page.php template and select full width from the page in WordPress or add the force full width Genesis layout code in the template.

// Force content-sidebar layout setting
//add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' );
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

Here is a starter Genesis theme ready to go with a widgetized home page but a different layout to the above.

8 Comments

  1. Susanta Sahoo on August 20, 2016 at 6:08 am

    Thanks for the great tut, Neil! Everything looks great but where’s the footer widget? My footer widget appears under Widget sections but they don’t appear on the site. Am I missing anything? I appreciate your help!

    • Susanta Sahoo on August 20, 2016 at 6:13 am

      Ok, my bad. I fixed the code and now it’s appearing. Thanks,

  2. Michael Gorman on June 8, 2016 at 5:01 am

    Your very clear directions were invaluable to me-I am using the ‘magazine pro’ theme and was wondering about that forced sidebar space on the home page-thanks!

  3. Dirk on May 20, 2016 at 4:39 pm

    Thanks for this clear tutorial ! It helped me a lot to understand better the Genesis structure.
    Where do I put the additional code to hide the homepage content ? I assume it will hide the initial (dynamic) content , but will still display the new widgetized content.

  4. Rvi on March 7, 2016 at 6:51 pm

    Hey Neil, really useful stuff!

    I would like to apply these widgets to a different page, other than home… How would I do that?

    Thank you 🙂

  5. Amit Ramani on July 19, 2015 at 11:39 pm

    Thank you much for this valuable step-by-step guide. I am a newcomer to the Genesis world. I have been looking for a way to create custom CTA’s on the home page so I can highlight the main offering, instead of just displaying products.
    I did download your child theme from github and have been experimenting with it. I understand you used placeholder images in there. I presume it should be easy to design my own CTA with an image background on it with a button overlay. The button would have the CTA text on it. Do you think I am on the right track?

  6. Elaine on April 12, 2015 at 4:19 pm

    Thanks for your clear instructions! I was able to add a custom footer below the 4-column footer Genesis already provides in its child templates w/ a bit of tweaking. I’m a novice coder, so your instructions were VITAL in helping me meet our client’s needs.

Leave a Comment





%d bloggers like this: