Set loop format & have a loop inside other one

Question

I have few questions on wordpress loop. The question may be strange, but it was fit for the jquery requirement. What I want to do are:

1. Loop the "page" div with two "threads" show in each by NOT using any transition like page number(pagination??), but just to paste all the posts("thread" div) in below format inside one php. All the class name of div no need to be changed in loop.

2. "title" div come from another loop, as it is not related to "thread", that's "loop inside loop"?

   <div class="page">
       <div class="title">
           <--title from another loop-->
       </div>
   
       <div class="thread">
           <div class="img-cont"></div>
           <--content of 1st thread-->
       </div>
   
       <div class="thread">
           <div class="img-cont"></div>
           <--content of 2nd thread-->
       </div>
   </div>
   

Answer 1

You can easily achieve this by using a multiple loop, or a loop inside a loop.

Let's assume you have your normal page template with the standard WordPress loop, outputting your wrapper <div class="page"> and the title:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="page">
        <div class="title">
            <?php the_title(); ?>
        </div>
        <!-- other loop will go here -->
    </div>
<?php endwhile; endif; ?>

Now you need to call a new instance of WP_Query, with all the $args that you need.

Please do not just use query_posts( $args )!, as this is not intended to be used by themes and plugins.

Your second loop would look something like this:

$second_query = new WP_Query( $args );
while ($second_query->have_posts()) : $second_query->the_post(); // Loop through the second loop and set up post data
?>
    <div class="thread">
        <div class="img-cont"></div>
        <?php $second_query->the_content(); ?>
    </div>
<?php endwhile; ?>

All together this could be an example of your code:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="page">
        <div class="title">
            <?php the_title(); ?>
        </div>

        <?php
            $second_query = new WP_Query( $args );
            while ($second_query->have_posts()) : $second_query->the_post(); // Loop through the second loop and set up post data
        ?>
                <div class="thread">
                    <div class="img-cont"></div>
                    <?php $second_query->the_content(); ?>
                </div>
        <?php 
            endwhile;
        ?>
    </div>
<?php endwhile; endif; ?>

Of course, you can also have two custom loops instead of the standard WordPress one:

<?php 
    $first_query = new WP_Query( $args );
    while ($first_query->have_posts()) : $first_query->the_post();
?>
    <div class="page">
        <div class="title">
            <?php $first_query->the_title(); ?>
        </div>

        <?php
            $second_query = new WP_Query( $args );
            while ($second_query->have_posts()) : $second_query->the_post(); // Loop through the second loop and set up post data
        ?>
                <div class="thread">
                    <div class="img-cont"></div>
                    <?php $second_query->the_content(); ?>
                </div>
        <?php 
            endwhile;
        ?>
    </div>
<?php endwhile; ?>