• Home
  • Cloud
    • General
    • SaaS
    • BPaaS
    • PaaS
    • IaaS
    • Other Internet Hosted Applications
      • WordPress
        • WooThemes Canvas
          • WooThemes Canvas CSS
  • About me
  • Why Badly Wired?
  • Contact

Badly Wired

Alan's technical notebook - WordPress and other stuff

You are here: Home / Code snippets / Creating a custom page template in Genesis with featured image and parent page title

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

12th January 2015 by Alan Leave a Comment

Fully Managed UK Hosting - Only £1+VAT till 1st Jan 2021 on Shared, Reseller and Dedicated Hosting! .... 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.

Fully Managed UK Hosting - Only £1+VAT till 1st Jan 2021 on Shared, Reseller and Dedicated Hosting! .... read more ....

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.

 

 

[Next] Find out where to host WordPress [Read the full article…]

Filed Under: Code snippets, Genesis, Wordpress  Tagged: genesis, template

About Alan

I'm Alan from Fullworks Digital Ltd, where I develop WordPress Plugins .

My day job consists of developing new code and solutions along with support my WordPress plugin user.

I started as a professional programmer in 1979 and had been involved with the IT of business technology in virtually every area that exist.

Badlywired.com is my technical notebook, my aide memoire of the many interesting facts that I come across and 'how to' recipes of things I do infrequently. As I spend a lot of time gathering parts of solutions from the internet and assembling them into my own solutions, and also just learning how to do things, this blog is one way of giving something back to the online community that has helped me extensively.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Applications
  • Cloud
    • General
    • Google Cloud
    • IaaS
    • Other Internet Hosted Applications
      • Wordpress
        • WooThemes Canvas
        • WooThemes Canvas CSS
    • SaaS
  • Code snippets
  • Discounts
  • Genesis
  • Google Apps for Works
  • Linux
  • News
  • SEO
  • Server setup
  • Services
  • Tech Tips
  • Uncategorised
  • Useful Images
  • Useful Stuff
  • WordPress Hosting
  • WordPress Plugins

Tags

background jobs beadcrumbs bind brandings Cache canvas Centos chrome css fail2ban Find firefox Flash fraud genesis gocardless godaddy Google google maps hackers internet explorer javascript KashFlow Linus linux Magento mapquest maps microsoft mysql news nohup php plugin plugins queens diamond jubilee replace SED SEO skype Varnish Virtualmin Webmin woothemes Wordpress

 

Affiliate and Privacy Notices

This site is free to use, but hopes to cover some costs through affiliate income, some products and links are affiliates and may earn the site advertising income.

Some affiliates use Cookies to track if you purchase from them, this allows them to apportion revenue to us you will need to refer to their specific privacy notices as to how you are tracked.

This site is a participant in the Amazon EU Associates Programme, an affiliate advertising programme designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.co.uk.

  • Privacy Policy

Copyright © 2021 · Badly Wired