How can I loop into two different DIVS without repeating the DIVs

Question

I am having a little trouble trying to figure out how I can accomplish this: I have a container with two colums in it, a right and a left column. Each column will have 3 posts with a short excerpt stacked in it. Ideally I would like to add one into the right and one into the left until it reaches 3 rows of posts(although if that proves to be alot more of a difficult task than I am fine with posting to the first column than the second. I am able to loop through the posts and add them to one column, but I am having trouble figuring out how one will loop into two separate divs, without repeating the divs. Here is how I am attempting it, so far this code will loop into the left column.

The first left side is using the loop to display the title(excerpt will come after) and the right side is just using html. Can anyone help me figure this one out?

      <h2>Popular posts</h2>
       <h3>Showing the most popular posts.</h3>

<div class="col4 inner-left">
       <ul class="popular-list">
   <?php
       query_posts('meta_key=post_views_count&orderby=meta_value_num&order=DESC&posts_per_page=10&post_type=pop');
       if (have_posts()) : while (have_posts()) : the_post(); ?>
            <li>
             <a href=<?php the_permalink(); ?>><?php the_title(); ?></a>
             <p>Popular post. This is a popular post, it really is.</p>
            </li>
   <?php
       endwhile; endif;
       wp_reset_query();
    ?>          
        </ul>
    </div>

<div class="col4 inner-right">
        <ul class="popular-list">
            <li>
              <a href="popularpostlink.php">This is a popular post</a>
              <p>Popular post. This is a popular post, it really is.</p>
            </li>
                 <li>
                  <a href="popularpostlink.php">This is a popular post</a>
                  <p>Popular post. This is a popular post, it really is.</p>
                </li>
            </ul>
        </div>

Answer 1

The key, I think, to what you are doing is to use "offset"

<div class="col4 inner-left">
    <ul class="popular-list">
        <?php
        query_posts('order=DESC&posts_per_page=3&post_type=pop');
        if (have_posts()) : while (have_posts()) : the_post(); ?>
            <li>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
        <?php endwhile; endif; ?>          
    </ul>
</div>
<div class="col4 inner-right">
    <ul class="popular-list">
        <?php
        query_posts('order=DESC&posts_per_page=3&post_type=pop&offset=3');
        if (have_posts()) : while (have_posts()) : the_post(); ?>
            <li>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
        <?php endwhile; endif; ?>          
    </ul>
</div>

<?php // Reset Query
wp_reset_query(); ?>

http://codex.wordpress.org/Class_Reference/WP_Query#Pagination_Parameters

Answer 2

This should convert your query into three chunks-- the first six in the right and left columns, with everything else in the center column. Swap the commented line with the uncommented one below it to put every sixth post in the center.

$q = new WP_Query(array('posts_per_page' => -1));

$sorted = array(
  'left' => array(),
  'center' => array(),
  'right' => array(),
);
$i = 0;
while($q->have_posts()) {
  $q->the_post();
//   if ($q->current_post != 0 && $q->current_post % 6 == 0) { 
  if ($i > 5) {
    $sorted['center'][] = $post;
  } elseif ($q->current_post % 2 == 0) { 
    $sorted['right'][] = $post; 
  } else { 
    $sorted['left'][] = $post;
  }
  $i++;
}
$cols = array_keys($sorted);
$i = 0;
foreach ($sorted as $column) {
  echo '<div class="outer '.$cols[$i%3].'">';
  foreach ($column as $p) {
    echo '<div class="inner">';
      echo $p->post_title;
    echo '</div>';
  }
  echo '</div>';
  $i++;
}

I did not try to match your output but the code should give you the hard parts. You can fill in the rest.

Answer 3

What about creating two variables ($left & $right) and then concatenate them using a foreach loop. Something like this: (Untested and very tired! Apologies in advance, but hopefully you get the idea of what I'm trying to do...)

<?php   
$left = "";
$right = "";
$i = 0;
while(have_posts()): the_post();
    foreach ($posts as $post) {
        $i++;
        if ($i % 2 == 0) { 
            $left .= $post; 
        } 
        else { 
            $right .= $post;
        }
    }
endwhile;
?>

<!-- Populate Divs -->
<div class="col4 inner-left">      
    <ul class="popular-list">
    <?php 
    // Add what you need here
    echo $left; 
    ?>
    </ul>
</div>
<div class="col4 inner-right">     
    <ul class="popular-list">
    <?php 
    // Add what you need here
    echo $right; 
    ?>
    </ul>
</div>

Answer 4

<?php 
    // add a counter
    $counter = 1;
    ?>
      <?php $query = new WP_Query(array("post_type" => "services","posts_per_page" => -1 )); ?>
      <?php if($query->have_posts()):?>
    <div class="row">
      <?php while($query->have_posts()):$query->the_post();?>
      <div class="col-md-4">
        <div class="service-media"> <?php the_post_thumbnail(); ?> </div>
        <div class="service-desc">
          <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
          <?php the_content(); ?>
        </div>
      </div>
      <?php if($counter % 3 === 0) :?>
        </div><div class="row">
      <?php endif; ?>
     <?php $counter++; endwhile; endif; wp_reset_postdata(); ?>