Display latest post in header

Hi there,

Not easy but this should help:
https://generatepress.com/forums/topic/how-to-use-element-header-to-display-feature-image-and-title/#post-721662

Thanks for the quick reply, Leo!

I've tried it but see only the headline and a CTA below the menu.

I'm not sure what was meant with the element ID Tom mentioned in the last step of the link you added.

Thanks,
Kevin

Hey Kevin,

Are you wanting to include the excerpt as well? Anything else?

The Element ID can be found in the address bar while you're editing that specific element: https://screencast.com/t/PJG86kk8E0

Let me know :)

Hey Tom,

thanks for clarifying! I found the ID in the element and exchanged the two 10's in the code snippet you posted but still can't see the featured image.

And yep, adding the excerpt would be great. I guess I can then normally style the header with CSS, right?

Thanks,
Kevin

Can you share the code as you have it now? Also, is it active on a specific page I can look at?

Sure, Tom.

Here's the code:

add_shortcode( 'most_recent_hero_post', function() {
    $latest_posts = get_posts( 'numberposts=1' );
    $latest_id = $latest_posts[0]->ID;

    $return = '<h2>' . get_the_title( $latest_id ) . '</h2>';
    $return .= '<a class="button hero-button" href="' . get_permalink( $latest_id ) . '">READ</a>';

    return $return;
} );

add_filter( 'pre_get_posts', function( $query ) {
    if ( $query->is_home() && $query->is_main_query() ) {
        $query->set( 'offset', '1' );
    }
} );

add_filter( 'generate_page_hero_background_image_url', function( $image_url, $options ) {
    if ( 4432 === $options['element_id'] ) {
        $latest_posts = get_posts( 'numberposts=1' );
        $latest_id = $latest_posts[0]->ID;

        $image_url = get_the_post_thumbnail_url( $latest_id );
    }

    return $image_url;
}, 4432, 2 );

Here's a live version: https://www.kevin-indig.com/

Try this as your shortcode:

add_shortcode( 'most_recent_hero_post', function() {
    $latest_posts = get_posts( 'numberposts=1' );
    $latest_id = $latest_posts[0]->ID;

    $return = '<h2><a href="' . get_permalink( $latest_id ) . '">' . get_the_title( $latest_id ) . '</a></h2>';
    $return .= '<div class="latest-excerpt">' . get_the_excerpt( $latest_id ) . '</div>';
    $return .= '<a class="button hero-button" href="' . get_permalink( $latest_id ) . '">READ</a>';

    return $return;
} );

Just to confirm, that latest post has a featured image set using the standard featured image field, yea?

Thanks, Tom.

Yes, the latest post does have a featured image set up the standard way.

I've added the new shortcode code but the featured image still isn't being pulled in.

If you replace the featured image function with the following, do you see anything output on the front-end of the site?:

add_filter( 'generate_page_hero_background_image_url', function( $image_url, $options ) {
    if ( 4432 === $options['element_id'] ) {
        $latest_posts = get_posts( 'numberposts=1' );
        $latest_id = $latest_posts[0]->ID;

        $image_url = get_the_post_thumbnail_url( $latest_id );

        var_dump( $image_url );
    }

    return $image_url;
}, 4432, 2 );

I added var_dump() to check the variable.

No, unfortunately not.

In that case, are you sure 4432 is the ID of the element? If nothing is appearing when using var_dump(), it means that condition isn't working.

Yessir. I limited the display to show only on the front page. Could that have something to do with it?

Would a shortcode plugin like WP Show Posts do the trick?

Can you try uploading a background image to the actual Element? It's possible that the filter is looking for an existing image to change.

Sure! How would I do that?