Create a Custom Template in Genesis Framework

This has to be one my favorite things when building a child theme with the Genesis Framework. The process is simple.

We first want to make sure we create a blank file to use as our template. Open up your favorite text editor and lets just start with a blank page. I always name my file at this step just so I don’t lose track what I am doing (if you are creating a template to overwrite one the default files make sure you name it so; for example: index.php, single.php page.php, ect.).

Next, in our blank canvas, include the template header. This is no different from creating a custom template for any other WordPress theme. Drop the following code at the top of your file. This name will show what is in the drop down for templates.

<?php /*
 Template Name: Template Name Here
 */ ?>

This is where things change. Normally you will begin to include the header get_header(); but, instead the template file in genesis acts much like functions.php: Using hooks and custom function we can change the output of the template file. For example, if this template was to only query a custom post type you have set, you can use the genesis_loop hook to add your own custom loop.

<?php
 remove_action('genesis_loop', 'genesis_do_loop');
 /**
 * Example function that replaces the default loop
 * with a custom loop querying 'PostType' CPT.
 */
 add_action('genesis_loop', 'gt_custom_loop');
 function gt_custom_loop() {
 global $paged;
 $args = array('post_type' => 'PostType');
 // Accepts WP_Query args
 // (http://codex.wordpress.org/Class_Reference/WP_Query)
 genesis_custom_loop( $args );
 }
 ?>

Since this function is only present in this template it will only be called on a page using the custom template.

Finally, we end the file with a function from genesis that calls in the rest of the template.

<?php genesis(); ?>

Note: – This function is only available for child themes running off genesis v1.3 for earlier versions. Use require_once(PARENT_DIR. ‘/index.php’);. However, it is highly recommended you upgrade to the latest version.

Save the file and push it up to your theme directory. Create or find the page you were wishing to use it on and select your template from the drop down of available templates. Once you publish your page you should see your custom template in action. Simple as that.

Recommended way: custom-template.php (Full code below)

<?php
/* 
Template Name: Template Name Here
*/

//custom hooks below here...

// Just an example.
remove_action('genesis_loop', 'genesis_do_loop');
/**
 * Example function that replaces the default loop with a custom loop querying 'PostType' CPT.
 * Remove this function (along with the remove action hook) to show default page content.
 * Or feel free to update the $args to make it work for you.
*/
add_action('genesis_loop', 'gt_custom_loop');
function gt_custom_loop() {

    global $paged;
    $args = array('post_type' => 'PostType');
    // Accepts WP_Query args (http://codex.wordpress.org/Class_Reference/WP_Query)
    genesis_custom_loop( $args );

}

genesis(); // <- everything important: make sure to include this.

The positive of creating custom templates this way is the amount of code. No need pulling in any the structural divs or default functions you would want to use. It is all included within genesis();. The other advantage of this method is you future proof your template file.

I know understanding hooks can be a little complicated so, I have included a template file that is the actual structure containing the main genesis hooks in their place. You may use this template to build templates, though it is not recommended. Think of it more as a learning tool.

Non-recommended way: custom-template-alt.php (Full code below)

<?php /* 
Template Name: Template Name Here
*/ ?> 

<?php get_header(); ?>

    <?php do_action( 'genesis_before_content_sidebar_wrap' ); ?>
    
    <div id="content-sidebar-wrap">
        
        <?php do_action( 'genesis_before_content' ); ?>
        
        <div id="content" class="hfeed">
            
            <?php do_action( 'genesis_before_loop' ); ?>
            <?php do_action( 'genesis_loop' ); ?>
            <?php do_action( 'genesis_after_loop' ); ?>
            
        </div><!-- end #content -->
        
        <?php do_action( 'genesis_after_content' ); ?>
    
    </div><!-- end #content-sidebar-wrap -->
    
    <?php do_action( 'genesis_after_content_sidebar_wrap' ); ?>

<?php get_footer(); ?>

Please share this post if it’s useful for you !

Leave a Reply

avatar
  Subscribe  
Notify of