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

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.