Creating a custom page template in Genesis with featured image and parent page title

If you find this free website useful – why don’t you support this with a donation? It is easy…. read more ….

This template is designed to be used for sub pages of  parent pages in WordPress, using Genesis framework.

The concept being to have a splash title of the parent page’s title   followed with a featured image with the actual page title.

Step 1

Create a Genesis page template

<?php
/**
* This file adds the demo page template.
*/

/*
Template Name: Demo Page
*/

genesis();

 Step 2

Remove the current page title using the Genesis hook

remove_action( 'genesis_entry_header', 'genesis_do_post_title' );

 Step 3

Create a function to display the parent page title, this uses get_post_ancestors() to get the id ang then get_the_title() to retrieve it. If you accidentally use this on a page without a parent it will get its own title

function bw_services_splash_section () {
    $parents = get_post_ancestors( $post->ID );
    /* Get the ID of the 'top most' Page if not return current page ID */
    $id = ($parents) ? $parents[count($parents)-1]: $post->ID;
    $top_title = get_the_title($id);
    ?>
      <div class="services-splash">
        <h1 class="top-title"><?php echo $top_title; ?></h1>
     </div>
   <?php
}

Step 4

Create a function to display the featured image and title  (this can be styled with CSS to become an overlay title)

function bw_add_page_image() {
    if ( has_post_thumbnail() ) {
    $title = apply_filters( 'genesis_post_title_text', get_the_title() );
    ?>
       <div class="banner-image">
      <?php echo genesis_get_image( array( 'size' => 'page-featured-image' ) ); ?>
         <h1 itemprop="headline" class="entry-title"><?php echo $title; ?></h1>
     </div>
     <?php
    }
}

Note that I am using a custom image size, so this should be defined in your functions.php

e.g.

add_image_size( 'page-featured-image', 680, 400, TRUE );

 Step 5

Add the Genesis action hooks to call the functions in the appropriate places

add_action( 'genesis_before_content_sidebar_wrap', 'bw_services_splash_section' );
add_action ( 'genesis_entry_header', 'bw_add_page_image' );

And that is the custom template built, just needing CSS to style it all up appropriately

The whole code in this example is as follow

<?php
/**
* This file adds the demo page template.
*/

/*
Template Name: Demo Page
*/

remove_action( 'genesis_entry_header', 'genesis_do_post_title' );

add_action( 'genesis_before_content_sidebar_wrap', 'bw_services_splash_section' );
add_action ( 'genesis_entry_header', 'bw_add_page_image' );

function bw_services_splash_section () {
    $parents = get_post_ancestors( $post->ID );
    /* Get the ID of the 'top most' Page if not return current page ID */
    $id = ($parents) ? $parents[count($parents)-1]: $post->ID;
    $top_title = get_the_title($id);
    ?>
    <div class="services-splash">
      <h1 class="top-title"><?php echo $top_title; ?></h1>
    </div>
    <?php
}


function bw_add_page_image() {
    if ( has_post_thumbnail() ) {
    $title = apply_filters( 'genesis_post_title_text', get_the_title() );
    ?>
    <div class="banner-image">
      <?php echo genesis_get_image( array( 'size' => 'page-featured-image' ) ); ?>
      <h1 itemprop="headline" class="entry-title"><?php echo $title; ?></h1>
    </div>
    <?php
    }
}

genesis();

The concept for the featured image overlay and detail on how to CSS is it into an overlay came from http://sridharkatakam.com/display-featured-images-posts-title-overlay/  so pop over there for more excellent Genesis stuff.