How to group each 8 posts on my frontpage into a parent div container in _S

  • I am building my own theme with Underscores (_S). Currently I am using a frontpage that displays the most x recent posts. I would like to group these posts like this:

    
<div class="teasergroup">
    <article class="post-1"></article>
    <article class="post-2"></article>
    <article class="post-3"></article>
    <article class="post-4"></article>
    <article class="post-5"></article>
    <article class="post-6"></article>
    <article class="post-7"></article>
    <article class="post-8"></article>
<div>
<div class="teasergroup">
    <article class="post-1"></article>
    <article class="post-2"></article>
    <article class="post-3"></article>
    <article class="post-4"></article>
    <article class="post-5"></article>
    <article class="post-6"></article>
    <article class="post-7"></article>
    <article class="post-8"></article>
<div>

    Important for me is the grouping per 8 posts. Secondary it would be cool if the children would be enumerated.

    <?php
    while ( have_posts() ) :
        the_post();

        get_template_part( 'template-parts/content', 'teaser' );

        // If comments are open or we have at least one comment, load up the comment template.
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;

    endwhile; // End of the loop.
    ?>

    While my teaser-part looks like this:

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
...
</article><!-- #post-<?php the_ID(); ?> -->

    Thank you very much for your help!

Viewing 3 replies - 1 through 3 (of 3 total)

  • If you are thinking of distributing your theme, you should be sure to honor the number of posts that the user has chosen to show.
    But it is as simple as initializing the counter before the loop and then checking if the limit has been reached before outputting. If it has been reached, output the /div and reset the counter.

    Thread Starter joetunn

    (@joetunn)

    Hi @joyously

    Thank you very much for your response and for the great input. However, It is a onetime theme and I do not think of distributing my theme.

    Firstly I am no expert in PHP and therefore struggling with the actual code. I would be very happy if you could give an exmaple of how that might look like.

    Furthermore I would like to have all 8 posts/div to have a different class (post-1, post-2, …, post-8) so I can distinguish them in CSS.

    Thanks for your help ??

    I don’t want to write your code for you. You need to be able to maintain it, so you need to write it. Start with psuedo-code and think through it and then transform each part to actual code.

    Some pointers on WordPress stuff:
    1. You say your code is for frontpage, which needs to handle both cases (single page as home page or latest posts as home page), because there is still an option in the admin.

    2. Your sample code is using the main query, and outputting multiple posts (so it’s for the list of latest posts) and yet it’s calling the comment template which will only output if the query is for a single (post or page). Read the code:
    https://developer.www.ads-software.com/reference/functions/comments_template/
    And really, why would you want to put the comments out for a teaser?

    3. Your teaser part is calling post_class(), which is good, but will conflict with what you are proposing for your counter class (post-1, post-2). The post ID is used to make a class like that by default.

    4. You can target things with CSS without a counter class. Look up nth-child, nth-of-type, nth-last-of-type. They are quite powerful. It’s better if you don’t rely on a counter class, partly because it’s a hassle, but mostly because then your CSS is more robust. You can’t pass variables to a template file as parameters, but it is possible to use set_query_var() just before the get_template_part and that variable will be exposed in the template. See https://developer.www.ads-software.com/reference/functions/set_query_var/ or just move the wrapping article from the template part into your loop so the variable is available right there. (but the variable is really not needed)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to group each 8 posts on my frontpage into a parent div container in _S’ is closed to new replies.