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

 

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.

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.

CSS Column Classes, Responsive Width

Most important of the CSS classes in the 2nd set of mark up is using the existing 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.

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 content div of that actual page so the widgets are only surrounded by the header and footer.

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.

Add in some CSS…

And its starting to take shape….

genesis-structured-home-page

Final Site

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.