0

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>
    
0

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; ?>
  • The second_query did slove my 2nd question, so just seperate it from the discuss. But I am not sure if it's solution of 1st question. Let me explain it again: The desireable loop result was bring in another exact "page div" following the previous one, and show the 3rd & 4th thread. – Cwkin7 Feb 5 '14 at 15:01
  • Okay, I posted another solutiuon using two custom queries. I hope that is what you want :) – fischi Feb 5 '14 at 15:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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