[Resolved] How to use Element Header to display feature image and title

Home Forums Support [Resolved] How to use Element Header to display feature image and title

Home Forums Support How to use Element Header to display feature image and title

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #721157
    John

    Hey gang,

    I want to display the most recent post feature image, title and read more link (see screenshot) in the header of my blog page. Also, I don’t want the most recent blog post to appear on the blog page below the header with my other posts. I only want the recent blog post to show in the header and the other posts to show on the page. I don’t need any of the CSS Code, I just need help on the PHP code that will have to be adde to the Element Header and possibly the Element Hook.

    Thank you,
    John

    Screenshot: https://kelleyranaudo.com/wp-content/uploads/2018/11/example.png

    #721662
    Tom
    Lead Developer
    Lead Developer

    Tough one!

    First, let’s create a shortcode to display your post title and more button:

    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 more</a>';
    
        return $return;
    } );

    So now you can use [most_recent_hero_post] to output that data.

    So now we need to exclude the most recent post from the actual loop, which we can do with this:

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

    Ok, now we need to set the background image of our hero..

    add_filter( 'generate_page_hero_background_image_url', function( $image_url, $options ) {
        if ( 10 === $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;
    }, 10, 2 );

    The only thing you need to change in the above function is the 10. Change it to whatever ID your Hero Element has.

    Hope this helps ๐Ÿ™‚

    #723377
    John

    Tom – really appreciate your help on this! Two questions.

    1. I used a hook with the code to exclude the most recent post from the actual loop but the most recent post still remains? (code sample #2)

    2. Can I use a class instead of an ID when setting the background image in the hero? (code sample #3)

    here’s the screen shot of hook element https://kelleyranaudo.com/wp-content/uploads/2018/11/Screen-Shot-2018-11-09-at-7.22.42-PM.png

    Thank you,
    John

    #723423
    Tom
    Lead Developer
    Lead Developer

    You’ll want to add all 3 functions using one of these methods: https://docs.generatepress.com/article/adding-php/

    Then add the shortcode to the Element: [most_recent_hero_post]

    Not too sure what you mean about using a class instead of an ID? Can you explain a bit more?

    #724145
    John

    Perfect. Thank you for your help!

    #724581
    Tom
    Lead Developer
    Lead Developer

    You’re welcome ๐Ÿ™‚

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