[Support request] Display latest post in header

[kevin]

Hey there,

I’ve been learning so much from this support forum. So, thank you very much!

My question: I’d like to create something like https://www.garyvaynerchuk.com/blog/, where I show my blog feed on a page that’s not the homepage (front page) and where the first article is displayed in the header with an extra-large title.

Sorry if there’s an obvious or easy answer that I missed.

Thanks,
Kevin

[Leo]

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

[kevin]

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

[Tom]

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 🙂

[kevin]

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

[Tom]

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

[kevin]

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/

[Tom]

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?

[kevin]

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.

[Tom]

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.

[kevin]

No, unfortunately not.

[Tom]

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.

[kevin]

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?

[Tom]

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.

[kevin]

Sure! How would I do that?

[Author]

Posts