[Resolved] individual homepage design

[Franz]

Hi,

I’d like to achieve a very individual homepage design which besides lots of other stuff (partially static, partially alternative loops) also shows the first four blog posts. At the same time I’d like to have paged consecutive pages that show the rest of the blog posts in an archive page style.

With my old theme this looks like this:

homepage: https://www.cruisetricks.de/
following page(s) with the rest of the blog posts: https://www.cruisetricks.de/page/2/

I’ve been trying around now for hours and end up in dead ends what ever I try with GP. I’m working with a child theme.

Just played around using get_template_part( ‘index’, ‘homepage’ ); but there seems to be many issues with this, very slow rendering of the page and the site footer always does somewhat “overlay” my content, page navigation is showing up “somewhere” …

Can you please guide me in the right direction which approach I’m supposed to take to achieve what I want?

Thanks and kind regards
Franz

[Tom]

Hi there,

Mixing posts and static content like this can be tough.

Have you considered using a plugin like WP Show Posts (or another post querying block plugin)? That way you can just build a standard static page and output posts where necessary.

That’s likely your best route.

Otherwise, using get_template_part() is the correct method. There shouldn’t be any slow rendering at all if it’s set up correctly – you just need to make sure the correct files exist.

For example: get_template_part( 'index', 'homepage' )

Would look for a file like this in your child theme: index-homepage.php

[Franz]

Hi Tom,

thanks a lot; so I’m on the right track with get_template_part().

Is there a way to use GP internal functions to process the loop from within my template? For the listing of the blog posts I don’t need any customization (except from a custom query) so it’d be great to just use the same function as is being used on regular archive pages. Same for the pagination code.

Franz

[Tom]

You could copy the index.php file and add it to your child theme. Then you could add the static elements around the default theme loop.

Alternatively, you may be able to extract this part of the template and add it to your own template: https://github.com/tomusborne/generatepress/blob/3.0.2/index.php#L28-L60

That should grab your default post loop.

[Franz]

Okay, but then this is the default loop where I can’t use any parameters like cat or posts_per_page or anything like that, correct? Or is there a way to modify the loop just for that instance?

[Tom]

The pre_get_posts action may be worth looking into: https://developer.wordpress.org/reference/hooks/pre_get_posts/

It allows you to “hook” into the query and define different settings based on your own conditions.

[Franz]

Thanks a lot. I won’t bother you any further 😉 There is a few options to play with and I’ll probably find a way to achieve what I want.

Latest I tried was modifying the query like:

$my_posts = new WP_Query([ args ])
if ( $my_posts->have_posts() ) : while ( $my_posts->have_posts() ) : $my_posts->the_post(); 
generate_do_template_part( 'index' );
endwhile;
endif;

… which would have worked perfectly if there was no absolute positioning in the output of generate_do_template_part( ‘index’ ); But the absolute positioning of the <article> elements prevent the wrapping div to have any height.

[Tom]

Absolute positioning? Are your posts using masonry?

[Franz]

masonry explains everything and switching it off solves the issue!

Thanks so much. Could have found that myself but sometimes things get too complex to find the easiest explanation 😉

Wrapping generate_do_template_part( 'index' ); with my custom query like explained in my earlier reply is the perfect solution for me.

[Tom]

Awesome, glad you got it working 🙂

[Author]

Posts