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
|
1 2 3 4 5 6 7 8 9 10 |
<?php /** * This file adds the demo page template. */ /* Template Name: Demo Page */ genesis(); |
Step 2
Remove the current page title using the Genesis hook
|
1 |
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
|
1 2 3 4 5 6 7 8 9 10 11 |
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)
|
1 2 3 4 5 6 7 8 9 10 11 |
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.
|
1 |
add_image_size( 'page-featured-image', 680, 400, TRUE ); |
Step 5
Add the Genesis action hooks to call the functions in the appropriate places
|
1 2 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<?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