Need help with spliting posts into two columns

Hi,
I need help with my loop. What is does is split posts into two columns.

<?php $row_start = 1; while ( $query->have_posts() ) : $query->the_post(); ?>

        <?php if ( in_array( get_the_ID(), $duplicates ) ) continue; ?>
        	<?php if( $row_start % 2  != 0) {// odd ?>
        		<div class="post">
            		left - <?php the_title();?><br>
            	</div>
        	<?php } ;?>
        	<?php if( $row_start % 2 == 0) {// even ?>
        		<div class="post">
            		right - <?php the_title();?><br>
            	</div>
        	<?php } ;?>

    <?php ++$row_start; endwhile; wp_reset_postdata(); endif; ?>

It outputs the loop as the following:
<div class="left">post</div>
<div class="right">post</div>
<div class="left">post</div>
<div class="right">post</div>
<div class="left">post</div>
<div class="right">post</div>

What I would to do is to wrap all posts in a div, like the following:
<div class="left">
post
post
post
</div>
<div class="right">
post
post
post
</div>

Thanks

  • Gregory
    • Site Builder, Child of Zeus

    I was able to get working but still need help. The problem is that everything is outside the loop and only using the_title. I'm going to add the_thumbnail,content and meta fields.

    This is what I'm using now:

    <?php // The loop
    
      if ( $query->have_posts() ) : $row_start = 1;
      while ( $query->have_posts() ) : $query->the_post();
    
      if ( in_array( get_the_ID(), $duplicates ) ) continue;
        if( $row_start % 2  != 0) {
          // odd: add result to $left
          $left[] = get_the_title();
        } else {
          // even: add it to $right
          $right[] = get_the_title();
        }
        ++$row_start; endwhile; wp_reset_postdata();
      // now loop has ended and we have 2 full arrays
      // that we can print each in it's div
      print "<div class=\"left\">";
      foreach($left as $postTitle) {
        print "$postTitle <br>";
      }
      print "</div>";
      // next column
      print "<div class=\"right\">";
      foreach($right as $postTitle) {
        print "$postTitle <br>";
      }
      print "</div>";
      endif;
    
    ?>
  • Ash
    • WordPress Hacker

    Hello Gregory

    How's about keeping it simple:

    if ( $query->have_posts() ) :
        while ( $query->have_posts() ) :
            $query->the_post();
            if ( in_array( get_the_ID(), $duplicates ) ) continue;
            ?>
            <div class="single-post-article"
            <?php
                echo get_the_title();
                // Add other functions about post meta and etc
            ?>
            </div>
        endwhile;
    endif;

    Not use css like this:

    .single-post-article{
    width: 50%;
    float: left;
    }

    Does that work for you?

    Have a good day!

    Cheers
    Ash

  • Gregory
    • Site Builder, Child of Zeus

    So I was able to get to working but I have one question left. I was able to get the remaining posts to be split into two columns. My problem is that if a post is in a certain category (called "First"), it should be the first post on left side. I was able to accomplish the task but only if it's on the left side (or odd). If a post is in that category "First" and it's on the right side (or even), it does not show up at the top of the left side.

    This is the code I've done so far on splitting the posts into two columns:

    `// the second loop, still getting the query from the top.
    <?php $row_start = 1; while ( $query->have_posts() ) : $query->the_post();?>

    // do not show posts that are in the "duplicates" variables.
    <?php if( in_array( get_the_ID(), $duplicates ) ) continue; ?>

    // split the remain posts into two columns. I'm assuming left = odd posts and right = even posts
    <?php if( $row_start % 2 != 0) { ?>
    <?php $left[] = get_the_ID(); ?>
    <?php } else { ?>
    <?php $right[] = get_the_ID(); ?>
    <?php } ?>

    // close the loop and query
    <?php ++$row_start; endwhile; wp_reset_postdata();?>

    // output the second loop.
    <?php foreach($left as $postID) { ;?>
    <?php $postData = get_post( $postID );?>

    // only show post with "first" category. Only works if it's on the left side
    <?php if(esc_html(get_the_category($postID)[0]->slug) == 'first'):?>
    first - <?php print $postData->post_title;?><br>
    <?php endif;?>
    <?php } ?>

    // show posts on the left side that don't belong in "first" category
    <?php foreach($left as $postID) { ;?>
    <?php $postData = get_post( $postID );?>
    <?php if(esc_html(get_the_category($postID)[0]->slug) !== 'first'):?>
    left - <?php print $postData->post_title;?><br>
    <?php endif;?>
    <?php } ?>

    // the right side
    <?php foreach($right as $postID) { ;?>
    <?php $postData = get_post( $postID );?>
    right - <?php print $postData->post_title;?><br>
    <?php } ?>`

    Any ideas on what to do next?

    Thanks everyone for the help.

  • Gregory
    • Site Builder, Child of Zeus

    Update: I've found a solution but I still have a problem. The problem occurs if there's an odd number of posts. If the loop has an odd number of posts, like 9, the right side has the most posts than the left side. What I want is if the loop has an odd number of posts, they favor the left side instead of the right side.

    For example: this is what the loop outputs if it has 7 posts:

    Post left                             Post right
    Post left                             Post right
    Post left                             Post right
    Post left

    What I'm trying to accomplish:

    Post left                            Post right
    Post left                            Post right
    Post left                            Post right
                                         Post right

    The code used to split the loop:

    <?php $row_start = 1; while ( $query->have_posts() ) : $query->the_post();?>
    <?php if( in_array( get_the_ID(), $duplicates ) ) continue; ?>
    
    <?php if( $row_start % 2 != 0) { ?>
    <?php $left[] = get_the_ID(); ?>
    <?php } else { ?>
    <?php $right[] = get_the_ID(); ?>
    <?php } ?>
    
    <?php ++$row_start; endwhile; wp_reset_postdata();?>

    Thanks for the help.

  • Kasia Swiderska
    • Support nomad

    Hello Gregory,

    In that case you should add another conditions to your ifs - if row_start is not equal to number of posts post go to left and if row_start is equal to number of posts it goes to right column. To count posts in query you can use

    $countPosts = $query->post_count;

    kind regards,
    Kasia

  • Gregory
    • Site Builder, Child of Zeus

    Never mind, got it working.

    <?php if(in_array( get_the_ID(), $duplicates ) ) continue; ?>
    				<?php if($row_start % 2 != 0 && $row_start != ($sum_total = $wp_query->found_posts - count($duplicates))):?>
    					<?php $left[] = get_the_ID();?>
    				<?php else:?>
    					<?php $right[] = get_the_ID();?>
    				<?php endif;?>

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.