Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I need to create a loop that can logically be described as the following for a carousel: Requirements:

  • 3 Loops
  • 2 Posts Per Loop
  • No Duplicates
  • Order by Post Date

Visual:

< Start Loop #1 >
< Post #1 >
< Post #2 >
< End Loop #1 >

< Start Loop #2 >
< Post #3 >
< Post #4 >
< End Loop #2 >

< Start Loop #3 >
< Post #5 >
< Post #6 >
< End Loop #3 >

Ideally, I would like a solution that could carry on infinite loops this way with no duplicates. I looked in the WP codex, but I could not find a specific solution that fit with my code shown here: http://pastebin.com/LitYb0wh

How can I make the loop to work with this type of structure?

<ul>

<li>
<div>Post 1</div>
<div>Post 2</div>
</li>

<li>
<div>Post 3</div>
<div>Post 4</div>
</li>

<li>
<div>Post 5</div>
<div>Post 6</div>
</li>

</ul>
share|improve this question
2  
is there a reason it needs to be separate queries? can you not query for all the posts you want in one query and handle it via a single loop? –  Milo Apr 23 '13 at 18:30
    
V, you can post all the necessary code inside your Question, but try to remove non-relevant parts for easier reading/understanding. –  brasofilo Apr 23 '13 at 19:01

2 Answers 2

To precisely match your three <ul> pattern you can do this:

$my_query = new WP_Query();
$my_query->query($args);
$skip = 2;
echo '<ul>';
while ($my_query->have_posts()) {
  $my_query->the_post();
  echo '<li>'.$post->post_title.'</li>';
  if ( ( ($my_query->current_post-1) % $skip ) == 0) {
    break;
  }
}
echo '</ul>';
echo '<ul>';
while ($my_query->have_posts()) {
  $my_query->the_post();
  echo '<li>'.$post->post_title.'</li>';
  if ( ( ($my_query->current_post-1) % $skip ) == 0) {
    break;
  }
}
echo '</ul>';
echo '<ul>';
while ($my_query->have_posts()) {
  $my_query->the_post();
  echo '<li>'.$post->post_title.'</li>';
  if ( ( ($my_query->current_post-1) % $skip ) == 0) {
    break;
  }
}
echo '</ul>';

However, the following it smaller, neater, and should create any number of <ul>s depending on the size of the query, which I assume is what you mean when you say "infinite loops this way".

$my_query = new WP_Query();
$my_query->query($args);
$skip = 2;
while ($my_query->have_posts()) {
  if ( ( ($my_query->current_post-1) % $skip ) == 0) {
    echo '<ul>';
  }
  $my_query->the_post();
  echo '<li>'.$post->post_title.'</li>';
  if ( ( ($my_query->current_post-1) % $skip ) == 0) {
    echo '</ul>';
  }
}

An option using a single <ul>

$my_query = new WP_Query();
$my_query->query($args);
$skip = 2;
echo '<ul>';
  while ($my_query->have_posts()) {
    if ( ( ($my_query->current_post-1) % $skip ) == 0) {
      echo '<li>';
    }
    $my_query->the_post();
    echo '<div>'.$post->post_title.'</div>';
    if ( ( ($my_query->current_post-1) % $skip ) == 0) {
      echo '</li>';
    }
  }
echo '</ul>';

The $args I used to test is...

$args = array(
  'post_type' => 'post',
  'post_status' => 'publish',
  'posts_per_page' => 8,
  'order' => 'ASC',
);

... but this should work with any that your provide.

It does assume that you don't want to query for a distinct set of posts for each Loop.

Obviously, I did not work this into your existing code but the pattern should be easy to apply.

share|improve this answer
1  
Elegant approach. –  Chip Bennett Apr 23 '13 at 20:47
    
Guys, Thank you so much for the input! I should have clarified more in that I need infinite <li></li> within one <ul></ul> grouping. I am assuming the solution would work the same way? I am working on the code now and I will post up as soon as I finish. –  user31940 Apr 24 '13 at 1:06
    
Ok, I updated the latest code, which unfortunately, still isn't working: link So, the carousel is basically 1 <ul> with quite a few stuffs in between the </ul>. The basic loop would allow the following: <ul> <li> <div>Post 1</div> <div>Post 2</div> </li> <li> <div>Post 3</div> <div>Post 4</div> </li> <li> <div>Post 5</div> <div>Post 6</div> </li> </ul> Where the carousel container is the <ul> and 2 post thumbs and their titles are displayed side-by-side per "slide". You can see an example here: video.gq.com 2nd carousel down. Thanks! –  user31940 Apr 24 '13 at 1:32
    
There is no significant difference. Just put the <ul> outside the loop and use <li> inside it. –  s_ha_dum Apr 24 '13 at 16:52
1  
While loop constructs and loop HTML/CSS markup are not WordPress specific, and your comment really starts to approach work for me for free territory. –  Chip Bennett Apr 24 '13 at 17:04

i use this code in my portfolio http://pocketapps.co/

enter image description here

<?php $args = array(
                                    //your argument code
                                );
            query_posts($args);?>

            <ul>
                 <?php  
                 $ls=0;
                    while ( have_posts() ) : the_post(); 
            ?>
                    <?php if($ls%2==0): echo '</li><li>'; endif; ?>
                    <div class="app">
                            //your code here

                    </div>
             <?php 
                $ls++;
                endwhile;
                wp_reset_query();
             ?>
            </ul>
share|improve this answer
    
-1 for using query_posts –  Pieter Goosen May 17 at 19:07

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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