[Resolved] Create a blog home page with latest entry in hero banner

[madmanweb]

Hi.

I’m trying to create a layout for a podcast site similar to this:
https://liviucerchez.com/castilo/

Basically, the latest post (episode) needs to be in a hero slide like that, with the earlier posts in a regular list format.

What would be the best way to accomplish this?

Optionally, I would like to introduce an advertisement panel below the latest post banner as well.

[David]

Hi there,

do you already have a site set up with the Podcast archive? If so can you share a link so i can take a look?

[madmanweb]

Yep, it’s a vanilla GP install right now. I’ll do the design and styling later.

https://wordpress-151076-839570.cloudwaysapps.com/

[Tom]

Hi there,

So the main thing we’re trying to achieve here is adding the latest post into a hero element?

If so, maybe something like WP Show Posts will help?: https://wordpress.org/plugins/wp-show-posts/

Then you can set up a list which displays the latest post (and only that post), and set it so the full content shows.

Is this only going to show up on the home page? We’ll need to know so we can offset that first post in the content itself.

[madmanweb]

Hi Tom. Yes, it will be only on the home page.

[Tom]

In that case, you could do this:

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

That will offset your posts on the home page so the latest post can display in the hero.

[madmanweb]

OK, so that didn’t work.

Here is the site before I added a page hero or the code. [1]

I set up a page hero with WP-Posts to show only one post. That created the banner I wanted. It took the nav bar away though. [2]

But when I added the filter code you posted above using Code Snippets plugin, the hero along with the site title vanished. [3]

This is a vanilla site right now with no other plugins except for GP, Simple CSS, Code Snippets, and WP Posts.

Screenshots of WP Posts and Page hero settings are at [4]

[1] https://imgur.com/a/KKtFRyU

[2] https://imgur.com/a/MLkAulf

[3] https://imgur.com/a/gZTSmo1

[4] https://imgur.com/a/ZP8XiCl

[Tom]

2. What happens if you just add some text as the Header content? Does the navigation disappear? If so, do you have something set as your navigation logo in the “Site Header” tab?

3. I just adjusted the function I shared above. Can you try again?

[madmanweb]

Tried it.

With just a plain H1 in hero and snippet deactivated, I get [1]

With just a plain H1 in hero and snippet adjusted to new function, I get [2]
So the offset works in that.

With new code and putting the WP Posts shortcode in, I get [3]
Which is working as intended.

Fingers crossed that there are no unintended consequences elsewhere in the site later. 😉

If you don’t mind my asking, how is the new code different?

[1] https://imgur.com/a/lG7j4Jv
[2] https://imgur.com/a/lG7j4Jv
[3] https://imgur.com/a/35kCQWV

[Tom]

Awesome, getting closer! Now to figure out where the navigation went. What setting do you have set for your navigation location in Customize > Layout > Primary Navigation?

Do you have a navigation location set in the Site Header tab of your Header Element?

[madmanweb]

The menu was set to “above header” but I set it to default and the nav menu is appearing now.

[Tom]

Awesome 🙂

[madmanweb]

Hi Tom.

Ran into an unexpected problem with this function code and the infinite scroll.

Now the same posts are being looped and repeated at the end when the infinite scroll is triggered.

You can see it athttps://wordpress-151076-839570.cloudwaysapps.com/ once every 5 posts.

[Tom]

Hi there,

And this issue goes away if you remove the pre_get_posts function?

[madmanweb]

Yes. I switched it off in Code Snippets and everything works fine again. Unfortunately, that also screws up the “featured post” on top that I’m manually putting in the element using WP Show Posts.

I’ve set the “Settings>Reading” option to show only 2 posts so you can see this happening. The posts “Episode 119: Modi’s Lost Opportunity” and “Episode 118: Zombie Firms and Creative Destruction” keep repeating as you scroll down.

So the setup right now is:

1) A “hook” element to show the latest post using WP Show Posts. The hook is for inside_container

2) The remaining posts displaying as usual with your function.

This is the only way I could think of to put the “latest episode” in its own featured box without the sidebar. If you have a more elegant solution that doesn’t require a function to be used, I’m all ears.

[Author]

Posts