WordPress.org

Ready to get started?Download WordPress

Forums

the_loop inside row and cols (for purists) (1 post)

  1. Peter_L
    Member
    Posted 10 months ago #

    On a category page, I want to loop my (paged) posts inside the rows and cols of a grid system. A simplified version of 2 cols per row looks like this:

    <div class="row">
        <div class="col span_6"></div>
        <div class="col span_6"></div>
    </div>
    <div class="row">
        <div class="col span_6"></div>
        <div class="col span_6"></div>
    </div>
    ...

    To do this I wrote this code:

    <div class="row">
    <?php
    $postcounter = 0;
    /* Start the Loop */
    while ( have_posts() ) : the_post();
    	echo '<div class="col span_6">*content here*</div>';
    	$postcounter++;
    	if(($postcounter != 10) && (!($postcounter&1))){ echo '</div><div class="row">'; }
    endwhile;
    ?>
    </div><!-- close row -->

    This works.
    The second part of the if-statement checks $postcounter even or odd. If even, the row is closed and a new row is opened.
    The first part of the if-statement checks if this is the 10th post ( = post_per_page ). If it is the 10th post, the close-open row isn't included as the already open row will get closed by the last rule of this code example.

    This works but suppose a category with 12 posts, second paged page. This one will show 2 posts. However - and here we come to my problem - the code will look like this:

    <div class="row">
        <div class="col span_6"></div>
        <div class="col span_6"></div>
    </div>
    <div class="row"></div>
    ...

    Ending with an empty row because the if-statement will fail and add the end-begin-row code. (the 12th post being even but not $postcounter == 10)

    Any way around this?

Reply

You must log in to post.

About this Topic