Two reasons lie at the core of why the Genesis framework is arguably the best: flexibility and simplicity. Using baked-in Genesis hooks, we are able to quickly assemble page templates with total control of each content area. Here are four different techniques for building a template to display dynamic content that can be easily updated or modified.

• Set Genesis page layout to one of six default options
• Register and display two custom widgets above the fold
• Remove standard Genesis loop and replace it with a custom loop
• Apply a custom body class for page-specific styling

To get started with your own custom page template, begin with your opening <?php tag and name the template. Be sure to close out the template by concluding with the genesis(); function. The rest of our template code will go between the page description and closing genesis(); line.

<?php

/**
Template Name: Custom
Description: Custom page template
*/

genesis();

The name you provide above will be displayed in the attributes section of the edit page screen, typically right below the update button on single pages. Select your option and update the page to set your custom template.

Template Layout

Especially nifty with the Genesis framework is how quick and painless it is to set page layout for a custom template. Use genesis_pre_get_option_site_layout to apply any one of the six built-in layouts: full-width-content, sidebar-content-sidebar, sidebar-sidebar-content, content-sidebar-sidebar, sidebar-content content-sidebar.

//* Force page layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_content_sidebar' );
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_sidebar_content' );
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_content_sidebar_sidebar' );
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_sidebar_sidebar_content' );
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_sidebar_content_sidebar' );
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

Bring the widgets

Widgets can be helpful to drop in text to a designated area, while quickly being able to adjust to a different type of content by adding a different widget. First, we need a few lines added to functions.php in order to register the widgets:

genesis_register_sidebar( array(
'id' => 'custom-widget-left',
'name'        => __( 'Custom Page Left', 'theme_prefix' ),
'description' => __( 'This is the left section of custom page.', 'theme_prefix' ),
) );
genesis_register_sidebar( array(
'id' => 'custom-widget-right',
'name'        => __( 'Custom Page Right', 'theme_prefix' ),
'description' => __( 'This is the right section of custom page.', 'theme_prefix' ),
) );

Once the widgets are registered, we need to set custom meta for the page template. We are first using add_action(); to instruct replacement of genesis_meta for custom_template_meta, then writing our own function to specify what the new meta will include: widgets (if active), remove_action(); on Genesis loop to replace it with your own add_action();.

add_action( 'genesis_meta', 'custom_template_meta' );
function custom_template_meta() {
if ( is_active_sidebar( 'custom-widget-left' ) || is_active_sidebar( 'custom-widget-right' ) ) {
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'custom_template_meta_loop' );
}
}

Next let’s add a custom body class for page-specific styling and set the page layout to fullwidth.

add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

add_filter( 'body_class', 'add_body_class' );
function add_body_class( $classes ) {
$classes[] = 'custom-template';
return $classes;
}

To build out what custom_template_meta_loop will display on the front end, first lay out each page widget wrapped in a div with a few classes, or whichever HTML structure you prefer. Once this is done, we are able to add the proper, specific styling for each widget class.

function custom_template_meta_loop() {
genesis_widget_area( 'custom-widget-left', array(
'before' => '<div class="custom_widget_left custom_widget">',
'after'  => '</div>',
) );
genesis_widget_area( 'custom-widget-right', array(
'before' => '<div class="custom_widget_right custom_widget">',
'after'  => '</div>',
) );

Gimme Da Loop

Often there comes the need for displaying a loop of custom post types, instead of a built-in loop of WordPress posts. Within our custom_template_meta_loop() function and below the widgets already in place, we can use an array to specify the arguments for our custom post loop–most importantly updating custom-type to your own custom post type slug.

Within the loop below, I added two variables for $custom_title and $custom_entry in our loop of 4 most recent custom post types, ascending order by title.

function custom_template_meta_loop() {
genesis_widget_area( 'custom-widget-left', array(
'before' => '<div class="custom_widget_left custom_widget">',
'after'  => '</div>',
) );
genesis_widget_area( 'custom-widget-right', array(
'before' => '<div class="custom_widget_right custom_widget">',
'after'  => '</div>',
) );

$args = array(
'post_type' => 'custom-type', // enter custom post type
'orderby' => 'title',
'order' => 'ASC',
'posts_per_page'=> '4',
);
$loop = new WP_Query( $args );
if( $loop->have_posts() ):
while( $loop->have_posts() ): $loop->the_post();
global $post;
$custom_title = get_the_title();
$custom_entry = get_the_content();
echo "<div class=\"custom_block\">
<div class=\"custom_title\">$custom_title</div>
<div class=\"custom_entry\">$custom_entry</div>
</div>";
endwhile;
endif;
}

There we have it! A fullpage page layout and two widget areas to display above a custom post type loop, with a custom body class custom-template. These are techniques I recommend, and at this point part of daily regimen. Once you have the correct registered widgets in functions.php, here is code for the entire template:

<?php

/**
Template Name: Home
Description: Home page template
*/

add_action( 'genesis_meta', 'custom_template_meta' );
function custom_template_meta() {
if ( is_active_sidebar( 'custom-widget-left' ) || is_active_sidebar( 'custom-widget-right' ) ) {
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'custom_template_meta_loop' );
}
}

add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

add_filter( 'body_class', 'add_body_class' );
function add_body_class( $classes ) {
$classes[] = 'custom-template';
return $classes;
}

function custom_template_meta_loop() {
genesis_widget_area( 'custom-widget-left', array(
'before' => '<div class="custom_widget_left custom_widget">',
'after'  => '</div>',
) );
genesis_widget_area( 'custom-widget-right', array(
'before' => '<div class="custom_widget_right custom_widget">',
'after'  => '</div>',
) );

function custom_template_meta_loop() {
genesis_widget_area( 'custom-widget-left', array(
'before' => '<div class="custom_widget_left custom_widget">',
'after'  => '</div>',
) );
genesis_widget_area( 'custom-widget-right', array(
'before' => '<div class="custom_widget_right custom_widget">',
'after'  => '</div>',
) );

$args = array(
'post_type' => 'custom-type', // enter custom post type
'orderby' => 'title',
'order' => 'ASC',
'posts_per_page'=> '4',
);
$loop = new WP_Query( $args );
if( $loop->have_posts() ):
while( $loop->have_posts() ): $loop->the_post();
global $post;
$custom_title = get_the_title();
$custom_entry = get_the_content();
echo "<div class=\"custom_block\">
<div class=\"custom_title\">$custom_title</div>
<div class=\"custom_entry\">$custom_entry</div>
</div>";
endwhile;
endif;
}

genesis();