[Resolved] Header/Hero with featured post on top of blog page

[Vau]

Hello Tom and Team of GeneratePress!

I have some hopefully simple question… But I’m stuck and need some hint how to achieve this layout. At the moment I’m preparing a news site… and the structure of the blog page should look like this image:

GP Layout question

Header or Hero on top with the latest featured / sticky post and the posts featured image. And below this Header/Hero the “normal blog page: on the left side two columns with all the other blog posts in masonry layout. And on the right side of the blog page a sidebar with recent post of a category.

I managed to have the sidebar with your plugin “show posts” in combination with plugin “widget options”. And I also managed to have a normal Hero on top. But using the Elements feature I cannot get the featured post on top of the blog page (in the example image the yellow part). Do you have an idea how to show the featured/sticky post in header using elements or hooks? Should be simple, but I don’t get it. As it is the blog page, I cannot use sections …

Thanks you for a quick hint! And thank you for your wonderful GeneratePress theme. I’m using the Pro version for years now and I’m really happy with it 😉

All the best!

[Tom]

Hi there,

It’s actually not very simple, unfortunately. This might help get you started: https://generatepress.com/forums/topic/how-to-use-element-header-to-display-feature-image-and-title/#post-721662

Another option is to create a list with your featured post in WP Show Posts, and then add that shortcode into your hero element.

Let me know if you need more info 🙂

[Vau]

Thank you for your quick response! Hopefully I’m getting there even if it is not a simple prolem 😉

Solution 1 (WP Show Posts):
good idea and I tried this as it would be a quick workaround. I managed to show the LATEST post with title, meta, excerpt and featured image in the header above all blog posts. But unfortunately it’s not possible to show the latest STICKY posts in the header. Our idea was, that the authors can mark a post sticky and it will display on top despite the publishing date. Or did I miss something? There is no possbility in “WP show posts” to only show sticky posts (you can only tick a box to exclude sticky ones but not limit the list to show only the sticky ones). So it’s always the newest post showing on top when I use ordering by “date” > “descending”. If a post is sticky or not seems not to have any effect on the ordering of post lists of “WP Show Posts”.

SOLUTION 2:
Thanks for the link, I could not find it in the forum yet. Seems to be quite close to our problem. But still we want to focus on sticky posts. So I tried to change the code and after some trials I now have kind of a solution: If a post is marked sticky than it will now show in the header – showing titel, excerpt with “read on link” and another “Read on” button. And of course the featured image and post meta are still missing in the code. Do you think this will also work on other devices (I’m kind of a beginner in PHP)? Do you have an idea how to show featured image and post meta below title?

This is the code up to now:

// Add shortcode for showing the latest STICKY posts
add_shortcode( 'most_recent_sticky_hero_post', function() {
	$sticky = get_option( 'sticky_posts' ); // all sticky posts
	rsort( $sticky ); // resort sticky with newest at the beginning
	$sticky = array_slice( $sticky, 0, 1 );	// only choose the latest one
	$sticky_id = $sticky[0]->ID; // get ID of sticky post

	$return = '<h2><a href="' .get_permalink(). '" title="'  . get_the_title() . '">' . get_the_title() . '</a></h2>';  
	$return .= '<p>' . get_the_excerpt($sticky_id). '</p>';
	$return .= '<a class="button hero-button" href="' . get_permalink( $sticky_id ) . '">Read more</a>';

    return $return;

} );

Use the shortcode [most_recent_sticky_hero_post] in your Elements code section to show the sticky post in the header.

[Tom]

1. Might be tough with only stickies, but you could do a custom field quite easily?

2. This looks good. You would use this function to get the featured image: https://developer.wordpress.org/reference/functions/the_post_thumbnail/

As for post meta, it kind of depends. What kind of meta are you wanting to add?

[Vau]

Hello again and thanks for your response!

I continued with solution 2 but it took some time to figure it out… Unfortunately the_post_thumbnail() did not work as intended. The featured image was generated but not inside the hero section. The featured image was displayed before the hero section. So I searched for another solution and I think it is working now. I’m not quite sure if it will work on other devices (not sure if it’s responsive).

// Add shortcode for showing the latest STICKY posts
add_shortcode( 'most_recent_sticky_hero_post', function() {
   $sticky = get_option( 'sticky_posts' ); // all sticky posts
rsort( $sticky ); // resort sticky with newest at the beginning
   $sticky = array_slice( $sticky, 0, 1 ); // only choose the latest one
   $sticky_id = $sticky[0]->ID; // get ID of sticky post
   $featuredimage_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' ); // create variable for the large featured image source url

   $return = '<div  id="page-hero-sticky-image"><a href="' . get_permalink() . '" title="'  . get_the_title() . '"><img class="page-hero-featured-img" src="' . $featuredimage_url[0] . '"></a></div>';   // output of featured image  
   $return .= '<div id="page-hero-sticky-content"><h2><a href="' . get_permalink(). '" title="'  . get_the_title() . '">' . get_the_title() . '</a></h2>';  	
   $return .= '<p>' . get_the_excerpt($sticky_id). '</p>';
   $return .= '<a class="button hero-button" href="' . get_permalink( $sticky_id ) . '">Read more</a></div>';

    return $return;

} );

Only the post meta is missing. I just want to add the date and author. Do you have a quick idea? Otherwise I think I can figure this out myself now. Thank you!

[Tom]

Shortcodes are funny like that. If you structure your shortcode like this you won’t have that issue: https://docs.generatepress.com/article/creating-a-shortcode/

For the post meta, try these functions:

generate_do_post_meta_item( 'date' );
generate_do_post_meta_item( 'author' );

If you want to build your own, you can see how we do it in this file: https://github.com/tomusborne/generatepress/blob/2.4.0/inc/structure/post-meta.php#L140

[Vau]

Hello Tom

Thank you for the detailed help. And sorry for answering so late. I tried the function to output the meta and it worked… somehow 😉 Same problem which I already had with displaying the featured image: the meta data is displayed but outside my main div. Seems that the output of the function generate_do_post_meta_item is inserted just before the HTML which is generated by the shortcode. To the point: the date is displayed but before the hero element…
I inserted ob_start(); at the begin and return ob_end_clean(); at the end like you suggested (https://docs.generatepress.com/article/creating-a-shortcode/). But it did not help getting the meta data at the right place.

Here is my code snippet. Maybe you have another idea? If not – don’t mind. I think it’s kind of a good solution for now, despite the missing or misplaced date/author information.

// Add shortcode for showing the latest STICKY posts
add_shortcode( 'most_recent_sticky_hero_post', function() {
	
ob_start();

	$sticky = get_option( 'sticky_posts' ); // all sticky posts
	rsort( $sticky ); // resort sticky with newest at the beginning
	$sticky = array_slice( $sticky, 0, 1 );	// only choose the latest one
	$sticky_id = $sticky[0]->ID;	// get ID of sticky post
	$featuredimage_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );	// create variable for the large featured image source url

	$return = '<div><a href="' . get_permalink() . '" title="'  . get_the_title() . '"><img src="' . $featuredimage_url[0] . '" /></a></div>';  // output of featured image
	$return .= '<div><h2><a href="' . get_permalink(). '" title="'  . get_the_title() . '">' . get_the_title() . '</a></h2>'; // output heading
	$return .= '<p>' . generate_do_post_meta_item( 'date' ) . generate_do_post_meta_item( 'author' ) . '<br>' . get_the_excerpt($sticky_id) . '</p>';    // output post meta and excerpt
	$return .= '<a href="' . get_permalink( $sticky_id ) . '">Weiterlesen</a></div>';  // read more button

    return $return;
	
return ob_end_clean();

} );

[Tom]

Hi there,

Output buffering means we don’t need all the return stuff:

add_shortcode( 'most_recent_sticky_hero_post', function() {
	
    ob_start();

	$sticky = get_option( 'sticky_posts' ); // all sticky posts
	rsort( $sticky ); // resort sticky with newest at the beginning
	$sticky = array_slice( $sticky, 0, 1 );	// only choose the latest one
	$sticky_id = $sticky[0]->ID;	// get ID of sticky post
	$featuredimage_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );	// create variable for the large featured image source url

    ?>
	<div>
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo $featuredimage_url[0]; ?>" /></a>
        </div>

	<div>
            <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

	    <p>
                <?php generate_do_post_meta_item( 'date' ) . generate_do_post_meta_item( 'author' ); ?><br>
                <?php echo get_the_excerpt($sticky_id); ?>
            </p>

	    <a href="<?php the_permalink( $sticky_id ); ?>">Weiterlesen</a>
        </div>
    <?php

    return ob_end_clean();
} );

[Vau]

Hello Tom,

and thank you for your answer. I just learned something abozut “ob” – output buffering. Did not know taht before. It almost worked with the code you provided. But I had to change ob_end_clean(); by ob_get_clean(); because ob_end_clean() returns boolean (true or false). So first the hero only displayed the number “1” in the front end of my website. With ob_get_clean it returned the buffered content. I never did this before so hopefully I did everything right. It is working now and finally I think the topic can be closed or marked as resolved 😉 Thank you very much for all your time and efforts!

add_shortcode( 'most_recent_sticky_hero_post', function() {
	
    ob_start();

	$sticky = get_option( 'sticky_posts' ); // all sticky posts
	rsort( $sticky ); // resort sticky with newest at the beginning
	$sticky = array_slice( $sticky, 0, 1 );	// only choose the latest one
	$sticky_id = $sticky[0]->ID;	// get ID of sticky post
	$featuredimage_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );	// create variable for the large featured image source url

    ?>
	<div id="page-hero-sticky-image">
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo $featuredimage_url[0]; ?>" /></a>   
     </div>
	<div id="page-hero-sticky-content">
            <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>  	  
			<p>
                <span class="entry-meta entry-date"><?php generate_do_post_meta_item( 'date' ); ?></span><br>    
                <?php echo get_the_excerpt($sticky_id); ?>
            </p>
	    <a class="button hero-button" href="<?php the_permalink( $sticky_id ); ?>">Read more</a>
        </div>
    <?php

	$content = ob_get_clean();
	
	return $content;
	
} );

[Vau]

Resolved 😉

[Tom]

Glad you got it working 🙂

[Author]

Posts