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.
Leave a Reply