Loop within a loop (Again) for template

Question

I know that the question was already asked but all the answer i found doesnt help me..

I made an HTML page that I would like to integrate in Wordpress.

The integration of the theme was done properly until I get to the posts part

I have a problem with algorithms to display posts so I know it comes from the Wordpress loop.

I have done several searches on Wordpress loops but I do not understand the different uses.

Here is the HTML code base that I would like to loop :

<div class="oeuvres">
   <div class="line0"><!-- should be dynamic -->
    <div class="oeuvre">
        <img class="img-oeuvre" src="ressources/creations/lisemassages.png" alt="">
        <div class="infos-oeuvre">
           <p>Title</p>
           <p>Content</p>
           <a class="btn-oeuvre" href="" target="_blank">Voir le site</a>
        </div>
    </div>
    <div class="oeuvre">
        <img class="img-oeuvre" src="ressources/creations/centredesoi.png" alt="">
        <div class="infos-oeuvre">
            <p>Title</p>
            <p>Content</p>
            <a class="btn-oeuvre" href="" target="_blank">voir le site</a>
        </div>
    </div>
  </div><!--class line0 -->
</div>

<div class="oeuvres">
   <div class="line1"><!--Should be dynamic-->
    <div class="oeuvre">
        <div class="infos-oeuvre">
                <p>title</p>
                <p>Content</p>
                <a class="btn-oeuvre" href="" target="_blank">Voir le site</a>
        </div>
        <img class="img-oeuvre" src="ressources/creations/comparepc.png" alt="">
    </div>

    <div class="oeuvre">
        <div class="infos-oeuvre">
            <p>Title</p>
            <p>Content</p>
            <a class="btn-oeuvre" href="" target="_blank">voir nos créations</a>
        </div>
        <img class="img-oeuvre" src="ressources/creations/wine&amp;sound.jpg" alt="">
    </div>
   </div><!--class line1 -->
</div>

Here's the code i've already done but i got some problem : there's only 3 articles which are repeated :

<?php   
     //Variables needed for the template
     $req = new WP_Query('category_name=creations') ;    //object with the posts
     $cptPosts = $req->post_count ; //nomber of post
     $cptOeuvres = $cptPosts/2 ; //number of div .Oeuvres needed
     $iOeuvres = 1 ; //counter of div.oeuvres
     $iPost = 1 ; //counter of posts
    ?>

    <?php echo 'cptpost = '.$cptPosts ; echo 'cptoeuvres = '.$cptOeuvres ;// to check $cptPost/$cptoeuvres value ?>

    <?php if ($req->have_posts()) : ?>

        <?php while($iOeuvres <= $cptOeuvres): ?>
            <?php //if $iOeuvres is pair use .line1 else .line2 ?>               
            <?php if($iOeuvres%2 == 0) : ?>

                 <div class = "oeuvres">
                   <div class ="line1">

            <?php else : ?>

                 <div class = "oeuvres">            
                    <div class ="line0">

            <?php endif ;?>


            <?php while($req->have_posts()) : $req->the_post() ; ?>

                <?php //show only 2 posts per line?>                          
                <?php if($iPost<=2):?>

                     <?php //if iOeuvres is pair, image goes before ?>
                     <?php if($iOeuvres%2 == 0) : ?>   

                         <div class="oeuvre">
                            <img class="img-oeuvre" src="<?php bloginfo('stylesheet_directory');?>/ressources/creations/lisemassages.png" alt="">
                            <div class="infos-oeuvre">
                                <p><?php the_title() ; ?></p>
                                <p><?php the_content() ; ?></p>                                
                                <a class="btn-oeuvre" href="http://lisemassages.fr" target="_blank">Voir le site</a>

                            </div><!--fermeture div.infos oeuvre-->
                          </div><!--fermeture div .oeuvre-->

                     <?php else : ?>

                           <div class="oeuvre">                                                
                              <div class="infos-oeuvre">
                                   <p><?php the_title() ; ?></p>
                                   <p><?php the_content() ; ?></p>
                                    <a class="btn-oeuvre" href="http://lisemassages.fr" target="_blank">Voir le site</a>
                               </div><!--fermeture div.infos oeuvre-->
                               <img class="img-oeuvre" src="<?php bloginfo('stylesheet_directory');?>/ressources/creations/lisemassages.png" alt="">
                           </div><!--fermeture div .oeuvre--> 

                      <?php endif ; ?>

                      <?php $iPost++ ;?>

                  <?php else : ?>

                        <!-- $iPost > 2 : close the bracket -->
                        <!--of div.line and div oeuvreS -> add 1 div .oeuvreS -->          
                        </div><!--fermeture div .line0/1-->
                      </div><!--fermeture div .oeuvreS-->

                   <?php $iPost=1; endif ;?>

               <?php endwhile; ?>

               <?php $iOeuvres++ ; ?>                

          <?php endwhile ;  ?>

       <?php else : ?>
            <!-- no post-->
            <h1>Rien du tout</h1>
       <?php endif ;?>

I dont know if my code is understable ...my english either...

But my main question is how to keep the value in a innerloop when those are in an another loop .(best example in my mind is like counting room in a hotel : floor 1 : you begin with 1,2....5 and floor 2, you continue with 6,7,8...)

Any help would be great !

Answer 1

[Edit]

If I understand correctly, what you call the "outer loop" is just for building a two-column layout. If so, you don't need to call two WordPress loops, just open a "fake" oeuvres at the beginning, close a "fake" oeuvres at the end, do a single loop (a single while have_posts()) and close and re-open an oeuvres DIV every 2 posts (when $iOeuvres%2 == 0).

Let me know if that makes sense.

[original answer]

First problem: If you do two loops, you should be using different names for the WP_Query objects (for example, $req1 and $req2 instead of two $req). Otherwise, the inner one will override the values from the outer one.

Second problem: You are missing $req->the_post() on the outer query. That means posts will never advance.

But do you really need a WP Loop within a WP Loop? I don't see any request for posts for the inner query, you only do a single call for WP_Query() on line 3. Maybe if you clarify what you are trying to fetch (which post types, how they nest, etc.) I can help more.

Answer 2

here's the code which generate the right html. Maybe the code needs some improveme nts.

   <?php

      reqCrea = new WP_Query('category_name=creations'); //objet contenant les posts de la categorie creations
      $cptPosts = $reqCrea->post_count; //nombre de post

                ?>
                <?php
                //echo 'cptpost = ' . $cptPosts;                    
                if ($reqCrea->have_posts()) :
                    $i = 0;
                    $ligne = 0;
                    $sortie = false;
                    while ($reqCrea->have_posts()) :

                        $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' );
                        $url = $thumb['0'];
                        echo '<div class="oeuvres">' ; 
                        // Sortie en cas de nb pairs de post
                        if ($i >= $cptPosts - 1 && ($cptPosts % 2 == 0))
                            break;

                        // Post de début de ligne
                        the_post();

                        $ligne = $ligne % 2;
                        ?>
                        <div class="line<?php echo $ligne; ?>">
                            <?php
                            do {
                                // Impair -> 2eme post sur une meme ligne
                                if (($i % 2) != 0) {
                                    the_post();
                                }
                                ?> 
                                <div class="oeuvre">
                                    <?php if ($ligne == 0): ?> 
                                        <img class="img-oeuvre" src="<?php echo $url ; ?>" alt="">
                                    <?php endif; ?> 
                                    <div class="infos-oeuvre">
                                        <p><?php the_title(); ?></p>
                                        <p><?php the_content(); ?></p>
                                        <a class="btn-oeuvre" href="http://lisemassages.fr" target="_blank">Voir le site</a>
                                    </div>
                                    <?php if ($ligne != 0): ?> 
                                        <img class="img-oeuvre" src="<?php echo $url ; ?>" alt="">
                                    <?php endif; ?> 
                                </div>

                                <?php
                                // Sortie en cas de nb impairs de post
                                if ($i >= $cptPosts - 1 && ($cptPosts % 2 != 0)) {
                                    $sortie = true;
                                    break;
                                }

                                if (($i % 2) == 0) {
                                    $i++;
                                } else {
                                    $i++;
                                    break;
                                }
                            } while ($reqCrea->have_posts());
                            if ($sortie)
                                break;

                            $ligne++;
                            ?>
                        </div>
                        <?php
                    endwhile;
                else :
                    ?>
                </div>
                <h1>Rien du tout</h1>
            <?php endif; ?>