Add in dual loop into single loop WordPress

Josh Cranwell comments:

I'm not sure this is entirely going to work using classed, but will give it ago.

So where do the .odd and .even class get put into the markup, or what do I have to put inside the loop markup to insert the dynamic class?

Matt Varone comments:

<blockquote>where do the .odd and .even class get put into the markup</blockquote>

That would be this line ( the post opening element ):

<div id="post-<?php the_ID(); ?>" <?php post_class( $class ); ?>>


Alternately, If you want to have more control as a class per post, you could also do:

<div id="post-<?php the_ID(); ?>" <?php post_class( 'item-'.$i ); ?>>

This will give you the classes: .item-2, item-3, item-4, etc which you can then target with CSS.

Kind Regards!

Josh Cranwell comments:

I'm sorry but odd and even class method will not work because my div heights are dynamic.

Have you seen my update above of how I envisage it to work...

Thanks for you help anyway dude.

Matt Varone comments:

Ok, so you want to have them split in two columns. I would suggest using the same loop multiple times and skipping on each the posts you don't want. Something like along this lines should do:


<?php

$wp_query = new WP_Query();

$per_page=$paged<=1?7:8;

$wp_query->query('posts_per_page='.$per_page.'&paged='.$paged);

if ($wp_query->have_posts()) :

while ($wp_query->have_posts()) : $wp_query->the_post();

// Check if paged
if ($paged<=1) { ?>


<!-- LOOP 1 -->
$c = $i % 2;
if ( $c === 0 ) continue; z

<div class="newest-post" title="<?php the_title(); ?>">



<!-- THIS LOOP RETURNS ONLY THE NEWEST LATEST POST -->



</div>

<?php };
break; // break the loop
endwhile;
?>

<!-- END LOOP 1 -->

<?php

// Rewind the loop
$wp_query->rewind_posts();

// set the iterator
$i=1;

?>

<div class="equal-height"></div>

<!-- SPLIT LOOP 1 RETURNS 1, 3, 5 -->

<?php
// loop again
while ($wp_query->have_posts()) : $wp_query->the_post();
// check if it is even then skip
$c = $i % 2;
if ( $c === 0 ) continue;

?>

<div class="post">
<!-- post stuff here -->
</div>

<?php $i++; endwhile; ?>

<!-- END SPLIT LOOP 1 -->

<?php $wp_query->rewind_posts(); //Rewind the loop ?>

<!-- SPLIT LOOP 2 RETURNS 2, 4, 6 -->

<?php

// reset the iterator
$i = 1;

while ($wp_query->have_posts()) : $wp_query->the_post();
// check if it is odd then skip
if ( $i % 2 ) continue;
?>

<div class="post">
<!-- post stuff here -->
</div>

<?php $i++; endwhile; ?>


<!-- END SPLIT LOOP 2 -->


</div><!-- end equal height div -->


<?php next_posts_link(__('PREVIOUS STORIES')) ?>

<?php previous_posts_link(__('NEWER STORIES')) ?>

<?php endif; ?>


Matt Varone comments:

Sorry previous code got this part messed up:

<!-- LOOP 1 -->

$c = $i % 2;

if ( $c === 0 ) continue; z

The correct code would be:

<?php

$wp_query = new WP_Query();

$per_page=$paged<=1?7:8;

$wp_query->query('posts_per_page='.$per_page.'&paged='.$paged);

if ($wp_query->have_posts()) :

while ($wp_query->have_posts()) : $wp_query->the_post();

// Check if paged
if ($paged<=1) { ?>


<!-- LOOP 1 -->

<div class="newest-post" title="<?php the_title(); ?>">

<!-- THIS LOOP RETURNS ONLY THE NEWEST LATEST POST -->

</div>

<?php };
break; // break the loop
endwhile;
?>

<!-- END LOOP 1 -->

<?php

// Rewind the loop
$wp_query->rewind_posts();

// set the iterator
$i=1;

?>

<div class="equal-height"></div>

<!-- SPLIT LOOP 1 RETURNS 1, 3, 5 -->

<?php
// loop again
while ($wp_query->have_posts()) : $wp_query->the_post();
// check if it is even then skip
$c = $i % 2;
if ( $c === 0 ) continue;

?>

<div class="post">
<!-- post stuff here -->
</div>

<?php $i++; endwhile; ?>

<!-- END SPLIT LOOP 1 -->

<?php $wp_query->rewind_posts(); //Rewind the loop ?>

<!-- SPLIT LOOP 2 RETURNS 2, 4, 6 -->

<?php

// reset the iterator
$i = 1;

while ($wp_query->have_posts()) : $wp_query->the_post();
// check if it is odd then skip
if ( $i % 2 ) continue;
?>

<div class="post">
<!-- post stuff here -->
</div>

<?php $i++; endwhile; ?>


<!-- END SPLIT LOOP 2 -->


</div><!-- end equal height div -->


<?php next_posts_link(__('PREVIOUS STORIES')) ?>

<?php previous_posts_link(__('NEWER STORIES')) ?>

<?php endif; ?>

Kind Regards!

Matt Varone comments:

And... just noticed I typed <div class="equal-height"></div>. Make sure to remove that closing '</div>', otherwise the layout will come out wrong.

Josh Cranwell comments:

Theres something not quite right with it, breaks the site, get white screen.

I've made a snippet so you can see my source. You've got the right idea I think with what i'm after...

See snippet

http://snipt.org/nwkh1

Josh Cranwell comments:

Hi Matt, I did spot that :-) Thanks for your time, your nearlly there I guess.

Matt Varone comments:

No problem at all. Try replacing all your code with this:

http://pastebin.com/Es9R2eG9

Kind Regards!

Josh Cranwell comments:

Hi Matt, Sorry to take long with these response, I will up the prize fund for ya.

In your code, the closing div.equal-heighs is next to navigation links.

Surely that can be right? Would they need to be inside a loop?

See my diagram to help you - http://imgur.com/gXVjI

Thanks

Matt Varone comments:

Hi Josh,

No worries, though It seems that what you are proposing here is different from what you initially asked.

Josh Cranwell comments:

Hi Matt,

No, sorry its just such a difficult thing to explain. And for someone like me whos not massively familier with these complicated loops, I thought you were on the right track but it's only the position of the markup at the end that told me your not quite there.

Can you see from my diagram what I'm trying to acheive? of shall I try and rewrite the question differently?

Thanks

Matt Varone comments:

Hi Josh,

No problem. Hopefully this is what you are looking for:

http://pastebin.com/faFrU72k

Otherwise feel free to hit me up via PM :)

Kind Regards!

Matt Varone comments:

Sorry Josh,

Replace the line:

<?php $c++; } $i++; endwhile; ?>

with:

<?php } $i++; endwhile; ?>

Kind Regards!

Josh Cranwell comments:

Hi Matt, but the shouldnt the be something on line 66 to split the 2 loops? otherwise the content will be duplicated?

Many Thanks

Matt Varone comments:

Hi Josh,

My bad, apologies. The duplication comes from that extra bit of HTML I left from the example.

This should prevent posts being duplicated now:

http://pastebin.com/2HjTM9Qa

Kind Regards!

Josh Cranwell comments:

It works! But one slight issue, my layout breaks on the following pages.

I've uped your prize money too

I've looked at the markup - and I can see it's not closing the <div class="equal-heights">

Its perfect on page one, but page 2 it's not closing that div.

But this is because there is an 'odd' number of posts, If I add another post, so the posts on the page are of even number. It fixes the break, but this is not ideal.

Thanks dude

Matt Varone comments:

Hi Josh,

Thanks, glad it worked. This should solve that last issue:

http://pastebin.com/mgR6Y2b5

Kind Regards!

Josh Cranwell comments:

Perfect dude! Thank you so much!!!!

Your a genius!!!!

Money is all yours! All the best!

Josh

Matt Varone comments:

Hi Josh,

Glad to hear it's working :) Apologies for not getting it right the first time.

Kind Regards!