Force Full width and add custom content in Genesis Page Template

Recently I have published a post Custom Page Template in Genesis Child Theme and figured some people still have the problem to work with custom page templates.


Make sure to do every thing in steps so that if a piece of snippet does not work then you can figure out the problem with the code
<?php

/**
*
* Template Name: Agents
*
*/


genesis();

this will create a page template in "pages" post types. now add the page template in the menu and view it. This will show a simple page with title and sidebar. If you add content it will also be show. see the image below.

Return Full width

now we will add a filter that will return a full width page template.

  

// RTURNS A FULL WITH FOT THE PAGE TEMPLATE

add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

Note : If you select another page layout from the "Layout Setting" metabox then it will overwrite the above layout. (if you add full width filter to the page template, and select sidebar/content while publishing the page then sidebar/content layout will be applied to the page template)

There are other layout too that you can use in page template. See other Genesis Layout Filters You remove default layout from the Genesis Child Theme Remove Genesis Laout - Unregister Layouts in Genesis

Remove Default loop.

// remove default loop
remove_action( 'genesis_loop', 'genesis_do_loop' );

Now you will only see header and footer, all the content will be removed.

Custom Content on Custom Page Template :

this is the tricky part of the tutorial, to add custom content we need to hook into the action hook and will add the markup and content over there. If you add content without any action hook then content will be displayed on the top of the header.

to add content we need to know about Action Hooks and Filters that are available in Genesis Framework. We also need a simple Genesis Visula Hooks plugin to see the action hooks and filters. Please read this post to know how to see action hooks with Genesis Visual hooks plugin and use hooks to add and filter content.

to add three columns / Custom Content :

add_action( 'genesis_before_content', 'homepge_content' );

function homepge_content() { ?>

<div class="one-third first">

Lorem ipsum dolor sam.....</div>

<div class="one-third">

Lorem ipsum dolor sit amet......</div>

<div class="one-third">

Lorem ipsum dolor sit amet......</div>

<?php }