Add Featured Image at top of Single Post/Page in Genesis

One of the latest themes from Genesis has the ability to show the featured image that is set to appear at the top of a post or page, the setting is shown in the Customizer and is enabled by default – here is how you can use this in any Genesis theme.

show-featured-image-post-page

It is best to modularize the customizer and image functions into respective files but you can add the whole thing in functions.php.

Add the Customizer Fields and Settings

So add in the Customizer controls

<?php //<= dont add me in
add_action( 'customize_register', 'themeprefix_customizer_featured_image' );
function themeprefix_customizer_featured_image() {
global $wp_customize;
// Add featured image section to the Customizer
$wp_customize->add_section(
'themeprefix_single_image_section',
array(
'title' => __( 'Post and Page Images', 'themeprefix' ),
'description' => __( 'Choose if you would like to display the featured image above the content on single posts and pages.', 'themeprefix' ),
'priority' => 200, // puts the customizer section lower down
)
);
// Add featured image setting to the Customizer
$wp_customize->add_setting(
'themeprefix_single_image_setting',
array(
'default' => true, // set the option as enabled by default
'capability' => 'edit_theme_options',
)
);
$wp_customize->add_control(
'themeprefix_single_image_setting',
array(
'section' => 'themeprefix_single_image_section',
'settings' => 'themeprefix_single_image_setting',
'label' => __( 'Show featured image on posts and pages?', 'themeprefix' ),
'type' => 'checkbox'
)
);
}

Add in the function to add the Featured Image

If you wanted the image to appear before the header you would change the add_action hook to genesis_entry-header

Doing It Alone

If you didn’t care about the customizer control you can just add the featured image to the post with this amended snippet…

Using Custom Image Sizes

For any image sizes outside of thumbnail, medium or large you need to pass in the size and crop values in an array like this…

size => array(300, 450, true),

So you pass in widthheight and whether or not to hard crop; true for yes and false for no.

5 Comments

  1. sat on August 26, 2016 at 7:09 pm

    Thanks for the article, I am moving to the Magazine Pro theme I was not able to figure out how to set the featured image on a blog post. Your article was a great help setting up the featured image option in my Genesis child theme.

  2. Ricardo on July 19, 2016 at 6:30 pm

    This code seems to use any image attached to the page or post and present it as featured image. Shouldn’t it only display if a featured image is selected?

    • Matthew on July 27, 2016 at 2:09 am

      Thank you for pointing that our Ricardo.

      I’ve been working with this code on my redesign and now I’m concerned that it’ll display any image when I activate the child theme on my live site.

      How would I go about setting it so that it only injects the image if there’s a featured image selected?

      Thank you once more.

      • Neil Gowran on July 27, 2016 at 2:50 am

        You can add onto the conditionals
        if ( is_singular() && ( true === $add_single_image ) && has_post_thumbnail() )
        Then when in single post view it will only feature the image if it is set as a featured image.

Leave a Comment





%d bloggers like this: