Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Add in dual loop into single loop WordPress

  • SOLVED

Hi,

See my loop below, which is working perfect, but I need to build on it.



<?php

$wp_query = new WP_Query();
$per_page=$paged<=1?7:8;
$wp_query->query('posts_per_page='.$per_page.'&paged='.$paged);
$i=0;

if ($wp_query->have_posts()) :
while ($wp_query->have_posts()) : $wp_query->the_post();
if ($paged<=1 && $i==0) { ?>

<!-- LOOP 1 -->

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

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

</div>

<?php } else { ?>

<!-- LOOP 2 -->

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

<!-- THIS LOOP RETURNS NEXT 6 POSTS ON FIRST PAGE

AND RETURNS NEXT 8 POSTS ON PAGES AFTER FIRST -->

</div>

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

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

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

<?php endif; ?>



What my problem is, as you can see in my page.png image, is that the post boxes (created by loop 2) are all different heights, as expected, because content is dynamic.

Instead of using javascript to equal heights of the div, can someone help me split my second loop into 2.

For example, if you see page.png image, loop 2 is returning 1,2,3,4,5,6 - I need that breaking down into 2 loops, returning the same results, but allowing me to have markup for 1,3,5 and separate markup for 2,4,6

Please let me know if you need me to explain in more detail thanks.

Money will go to person who posts fully working code.


------------------------------------------------


See update below of how I need it to work...



<?php

$wp_query = new WP_Query();
$per_page=$paged<=1?7:8;
$wp_query->query('posts_per_page='.$per_page.'&paged='.$paged);
$i=0;

if ($wp_query->have_posts()) :
while ($wp_query->have_posts()) : $wp_query->the_post();
if ($paged<=1 && $i==0) { ?>

<!-- LOOP 1 -->

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

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

</div>

<?php } else { ?>

<!-- LOOP 2 - SPLIT -->

<div class="equal-height">

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

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



</div>

<!-- END SPLIT LOOP 1 -->

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

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



</div>

<!-- END SPLIT LOOP 2 -->

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

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

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

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

<?php endif; ?>



Though the second loop should still return the posts in the correct or 1,2,3,4,5,6

See image attached to with numbers added to post.

Answers (3)

2011-12-02

Matt Varone answers:

You could consider using an odd/even class. Something like this should do it:

$class = ($i % 2) ? 'odd' : 'even';

On your code:


<?php



$wp_query = new WP_Query();

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

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

$i=0;
$c=0;


if ($wp_query->have_posts()) :

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

if ($paged<=1 && $i==0) { ?>



<!-- LOOP 1 -->



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





<?php } else { $class = ($i % 2) ? 'odd' : 'even'; ?>

<!-- LOOP 2 -->

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

<!-- POST CONTENT -->

</div>


<!-- THIS LOOP THE NEXT 6 POSTS ON FIRST PAGE -->



<!-- THIS LOOP THE NEXT 8 POSTS ON PAGES AFTER FIRST -->





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



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



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



<?php endif; ?>


Kind Regards!


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!

2011-12-02

Francisco Javier Carazo Gil answers:

John,

You can divide it using even-odd:
function is_odd($number) {
return $number & 1; // 0 = even, 1 = odd
}


Francisco Javier Carazo Gil comments:

Depend in if is even or odd you can show markup for 1,3,5 and separate markup for 2,4,6.


Francisco Javier Carazo Gil comments:

Exactly, as Matt says you use two classes in your CSS:


.odd: here your style;
.even: here your style;


And in your PHP code:


is_odd($i) ? echo "odd" : echo "even";


Francisco Javier Carazo Gil comments:

Try it:


<!-- LOOP 2 - SPLIT -->
<div class="equal-height">
<!-- All the loop again -->
<!-- SPLIT LOOP 1 RETURNS 1, 3, 5 -->

<?php if(is_odd(get_the_ID())
break;
?>
<div class="post" title="<?php the_title(); ?>">

</div>
<!-- END SPLIT LOOP 1 -->

<!-- SPLIT LOOP 2 RETURNS 2, 4, 6 -->
<!-- All the loop again -->
<?php if(!is_odd(get_the_ID())
break;
?>
<div class="post" title="<?php the_title(); ?>">

</div>
<!-- END SPLIT LOOP 2 -->

2011-12-02

Sébastien | French WordpressDesigner answers:

use a <table>
or factice column

EDIT : maybe i have no understand your question ^^