[Support request] Display latest post in header

Home Forums Support Display latest post in header

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #967803
    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

    #967978
    Leo
    Staff
    Customer Support
    #968148
    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

    #968218
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #968246
    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

    #968495
    Tom
    Lead Developer
    Lead Developer

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

    #968736
    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/

    #968933
    Tom
    Lead Developer
    Lead Developer

    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?

    #968939
    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.

    #969148
    Tom
    Lead Developer
    Lead Developer

    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.

    #969383
    kevin

    No, unfortunately not.

    #969652
    Tom
    Lead Developer
    Lead Developer

    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.

    #969663
    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?

    #970253
    Tom
    Lead Developer
    Lead Developer

    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.

    #970259
    kevin

    Sure! How would I do that?

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.