Sridhar Katakam

Genesis and WordPress Tutorials

How to add featured images before entry on single Posts in Genesis

by 9 Comments

Updated on July 01, 2017

In Genesis Slack a user asked,

Hello everyone, I’m working on a custom theme and I’d like to customize my featured image to look like this: https://preview.arraythemes.com/publisher/2015/05/20/heydays-branding/

We can register a custom image size for the featured images on single Posts and display the featured image (if present) using genesis_before_entry hook in Genesis.

genesis-featured-image-single-posts-before-entry

Step 1

Add the following in child theme’s functions.php:

// Register a custom image size for featured image on single Posts.
add_image_size( 'post-image', 900, 540, true );

add_action( 'genesis_before_entry', 'sk_featured_image' );
/**
 * Display featured image (if present) before entry on single Posts
 */
function sk_featured_image() {
    // if we are not on a single Post having a featured image, abort.
    if ( ! ( is_singular( 'post' ) && has_post_thumbnail() ) ) {
        return;
    }

    // get the URL of featured image.
    $image = genesis_get_image( 'format=url&size=post-image' );

    // get the alt text of featured image.
    $thumb_id = get_post_thumbnail_id( get_the_ID() );
    $alt = get_post_meta( $thumb_id, '_wp_attachment_image_alt', true );

    // if no alt text is present for featured image, set it to Post title.
    if ( '' === $alt ) {
        $alt = the_title_attribute( 'echo=0' );
    }

    // get the caption of featured image.
    $caption = get_post( $thumb_id )->post_excerpt;

    // build the caption HTML if caption is present for the featured image..
    $caption_html = $caption ? '<figcaption class="wp-caption-text">'. $caption . '</figcaption>' : '';

    // display the featured image with caption (if present) beneath the image.
    printf( '<figure class="single-post-image wp-caption"><img src="%s" alt="%s" />%s</figure>', esc_url( $image ), $alt, $caption_html );
}

Thanks to Gary Jones for helping in the past with the code for setting alt text to that of the image, if present otherwise to entry title.

Step 2

Regenerate thumbnails.

Step 3

Add the following in child theme’s style.css:

.single-post-image img {
    vertical-align: top;
}

Reference: http://www.wpbeginner.com/wp-tutorials/how-to-display-wordpress-post-thumbnails-with-captions/

  • Hey Sridhar,
    Your posts are excellent thank you. I learn a lot of tips.

    Anyway… I wanted to ask, because I am trying to learn better php… So I see in the function you check first for negative condition and then return if the condition is not met.

    Can I ask why we don’t just check for positive match for single post with feature image?

    Is it more efficient to have the function return so the script can quickly move to next function? Or would we use this negative check more if we can more than just one conditional checks?

    Thanks in advance and keep up the excellent work.
    Thank you ☺️

    Reply

    • It is a good practice I’ve learned by seeing others’ code. It’s recommended to exit as early as possible.

      Is it more efficient to have the function return so the script can quickly move to next function?

      Yes.

      Remember: Hook late and exit early.

      Reply

      • That’s fantastic advice. Thank you so much Sridhar. From this moment on… This is what will always do. Cheers!

        Reply

  • This is great Sridhar. I have using another code to do this, but I really like yours which includes that Alt Text / Post Title.

    Reply

  • Hi,

    i follow your instructure, but it don’t have link in image,

    can you help me ? add some script to make it click able,
    so when someone click image, it will link to the post page ?

    ,thanks

    Reply
    • >