0

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>

4 Answers 4

2

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

1
  • I didn't even know about the offsets, when I was trying to figure out what to do, I wondered if there was some kind of parameter I could use to do that. I ended up using this as it works smoothly and is simple..plus I don't see any downfalls. Thank you. Dec 4, 2013 at 3:16
0

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.

-1

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>
2
  • 2
    Sorry, did you try that code before you posted it? You are concatenating an object as it were a string resulting in a "Catchable fatal error".
    – s_ha_dum
    Dec 3, 2013 at 5:00
  • 2
    And why the while Loop and the foreach? You are Looping over the same set of posts multiple times.
    – s_ha_dum
    Dec 3, 2013 at 5:07
-1
<?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(); ?>
2
  • 1
    Please edit your answer, and add an explanation: why could that solve the problem?
    – fuxia
    Mar 9, 2018 at 18:51
  • i done this in my demo project its working fine.here i want my three post in one div and another three post in second row div so every time after three post div added Mar 23, 2018 at 4:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.