Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by John Weland
John Weland
42,478 Points

Alternating outputs in the WordPress Loop

I am in the middle of making a page that is something of a 'timeline' in WordPress with Foundation 5. I know that I can use the loop to display posts with something like this

<?php
    $args = array(
        'post_type' => 'testimonials',
        'order' => 'desc'
        );
    $the_query = new WP_Query ($args);
?>

and then use the loop to render my code with 

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <!-- CODE TO RENDER -->
    <?php endwhile; else: ?>
        <p>There are no posts or pages here.</p>
    <?php endif; ?>

I could use CSS to do an nth-child but there is a lot of html that I have to manipulate too the odd posts in 'testimonials' in this example need to render in this code 

<div class="row path-item">
    <div class="large-7 push-5 columns">
      <div class="circle circle-left "></div>
    </div>
    <div class="large-5 pull-7 columns path-text left">
      <h3>Lorem ipsum dolor sit amet, consectetur</h3>
      <p>Something that happened in the past or will happen in the future Lorem ipsum dolor sit amet, consectetur adipiscing elit.  a est. Suspendisse potenti. Sc lorem pretium, molestie</p>
      <a href="#">Show something cool »</a>
    </div>
  </div>

and the even posts in testimonials would need to render in 

<div class="row path-item">
    <div class="large-7 columns">
      <div class="circle circle-right right"></div>
    </div>
    <div class="large-5 columns path-text right">
      <h3>Lorem ipsum dolor sit amet, consectetur</h3>
      <p>Something that happened in the past or will happen in the future Lorem ipsum dolor sit amet, consectetur adipiscing elit.  a est. Suspendisse potenti. Sc lorem pretium, molestie</p>
      <a href="#">Show something cool »</a>
    </div>
  </div>

I am stumped.

5 Answers

John Weland
John Weland
42,478 Points
John Weland
John Weland
42,478 Points

UPDATE: It is working now (for now). I am posting my current working version here and leaving it in case others have this problem later.

Open the loop (my arguments are already defined). So open the look if there is post and render my container HTML

<?php if ( have_posts() ) : $count == 0; ?> 
<!-- opening container -->

Moved the '$count++' to get a count of the post before deciding if they are odd or even then rendered the odd

<?php while ( $the_query -> have_posts() ) : $the_query -> the_post();  $count++;  if ($count %2 == 0) :?>
<!-- render odd posts in HTML -->

then said if its not odd (it must be even) so render it here

<?php elseif ($count != 0) : ?>
<!-- render even post in HTML -->

After running throuhg my post and rendering odds and evens its time to close out my container

<?php endif; endwhile;?>
<!-- closing container -->

Everything is rendered and working so close out the loop

<?php endif; ?>
John Weland
John Weland
42,478 Points
John Weland
John Weland
42,478 Points

UPDATE:

Every odd renders left and every even renders right now, but its duplicating my posts now 

<?php
    $args = array(
        'post_type' => 'testimonials'
        );

    $the_query = new WP_Query ($args);
?>

<?php if ( have_posts() ) : $count = 0; ?> 

<?php while ( $the_query -> have_posts() ) : $the_query -> the_post();  if($count % 2 == 0) : ?>
     <!-- render html -->
<?php endif; $count %2 != 0; ?>

     <!-- rendered HTML -->
<?php endif; ?>
eck
eck
43,038 Points
eck
eck
43,038 Points

Would a CSS3 solution work for your project? the :nth-child(odd) and :nth-child(even) selectors might solve your problem.

John Weland
John Weland
42,478 Points
John Weland
John Weland
42,478 Points

I'm using a template for this particular page and there is a lot of CSS already in place. I would have to refactor a bunch of code but it is probably possible. I was just hoping I could add a few lines to my loop to get the same result.