In Genesis Slack chat, a user asked:
Hi Everyone, any ideas on how I would create a featured image area above a page in the enterprise pro theme that looks like this : http://puu.sh/lZpz2/954b84e870.png
In this article I share the code for adding a section having breadcrumbs, title and excerpt on the left and featured image on the right below header on static Pages in Genesis.
Step 1
Add the following in child theme’s functions.php:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Enables the Excerpt meta box in Page edit screen. | |
| function wpcodex_add_excerpt_support_for_pages() { | |
| add_post_type_support( 'page', 'excerpt' ); | |
| } | |
| add_action( 'init', 'wpcodex_add_excerpt_support_for_pages' ); | |
| // Register a custom image size for featured images on Pages | |
| add_image_size( 'page-featured', 560, 175, true ); |
Step 2
Create a file named page.php in the child theme directory having the following code:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| add_action( 'genesis_after_header', 'sk_featured_section_pages' ); | |
| function sk_featured_section_pages() { ?> | |
| <div class="featured-section"> | |
| <div class="wrap"> | |
| <div class="one-half first"> | |
| <?php genesis_do_breadcrumbs(); | |
| genesis_do_post_title(); | |
| the_excerpt(); ?> | |
| </div> | |
| <div class="one-half"> | |
| <?php genesis_image( 'size=page-featured' ); ?> | |
| </div> | |
| </div> | |
| </div> | |
| <?php } | |
| // Remove breadcrumbs | |
| remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' ); | |
| // Remove entry header | |
| remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 ); | |
| remove_action( 'genesis_entry_header', 'genesis_do_post_title' ); | |
| remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 ); | |
| // Modify breadcrumb arguments | |
| add_filter( 'genesis_breadcrumb_args', 'sp_breadcrumb_args' ); | |
| function sp_breadcrumb_args( $args ) { | |
| $args['sep'] = ' > '; | |
| $args['labels']['prefix'] = ''; | |
| return $args; | |
| } | |
| genesis(); |
Step 3
Add the following in child theme’s style.css:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .featured-section { | |
| padding: 30px 0; | |
| background-color: #ededed; | |
| border-bottom: 1px solid #d2d2d2; | |
| } | |
| .featured-section .breadcrumb { | |
| margin-bottom: 10px; | |
| } | |
| .featured-section .entry-title { | |
| margin-bottom: 20px; | |
| } |
Could this be implemented without creating the page.php file in the theme directory?
I ask this after a thread on the Genesis WordPress Facebook group about updating child themes – https://www.facebook.com/groups/genesiswp/1049732085077988/
I don’t like to change the StudioPress child theme.
For the change in this post, I think that you could add a wp_head action and then add the above code within a is_page() check.
Do you think that that route would work?
My personal preference is to use page.php in cases like this. It makes the code modular and manageable.
But if you insist, the same can be done by adding http://pastebin.com/raw/TPPkryY1 in child theme’s functions.php.
I have implemented this tutorial for the theme I am customizing and it did exactly what it should do, that is, create a featured page section globally across the site using the page title information on each page.
For example if the page is the About page then the featured content pulls the page title as it is seen in the WP dashboard admin area and I would prefer to upload the image on a per page by page basis.
For example I have a resources page and I would like to have a banner above the content that relates to the page content.
Is there a way to use have this flexibility?