1

I have a class called "switchable" which basically switches the text and image from left to right, to right to left. I want this to happen for every second record. So, the first one on the left, and the second on the right etc. I just don't know how to achieve this with the below code. Every second record should have instead of just ,

    <?php $the_query = new WP_Query( array ( 'post_type' => 'crew_members', 'order_by' => 'menu_order', 'order' => 'ASC' ) ); ?>

    <?php if( $the_query->have_posts() ): while ( $the_query->have_posts() ) : $the_query->the_post() ; ?>

    <section>
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-md-6">
                    <div> <?php the_content(); ?> </div>
                </div>
                <div class="col-md-6">
                    <div class="boxed boxed--lg boxed--border bg--secondary"> <?php the_post_thumbnail( array (475, 317), [ 'class' => 'border--round' ] ); ?>
                        <h5><?php the_title(); ?></h5>
                        <p> <?php the_field( 'crew_member_excerpt' ); ?> </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <?php endwhile; endif; ?>
    <?php wp_reset_postdata(); ?>

EDIT:

After swissspidy's answer, I tried this:

<?php 
if ( 1 === $the_query->current_post % 2 ) {
        $class = 'class="switchable"';
}
?>
<section <?php echo $class; ?>>
    <div class="container">
        <div class="row justify-content-between">
            <div class="col-md-6">
                <div> <?php the_content(); ?> </div>
            </div>
            <div class="col-md-6">
                <div class="boxed boxed--lg boxed--border bg--secondary"> <img src="<?php the_post_thumbnail_url(); ?>" class="border--round">
                   <?php // another way: <?php the_post_thumbnail( array (475, 317), [ 'class' => 'border--round' ] ); ?>
                    <h5><?php the_title(); ?></h5>
                    <p> <?php the_field( 'crew_member_excerpt' ); ?> </p>
                </div>
            </div>
        </div>
    </div>
</section>
1

Inside the loop you can use $the_query->current_post to get the index of the post currently being displayed. You can then check if the index is an odd or even number and conditionally add the class. Example:

if ( 1 === $the_query->current_post % 2 ) {
  echo 'class="switchable"';
}
| improve this answer | |
  • I tried that (edited my original question) and it works! But I just wanted to check that my implementation is acceptable? – user8463989 Mar 30 '18 at 10:34
  • Sure. I probably would have used something like <section class="<?php echo 1 === $the_query->current_post % 2 ? esc_attr('switchable') : ''; ?>"> though to escape the attribute just in case you'd ever use a dynamic value in the future instead of just "switchable". It's easy to oversee that otherwise :-) – swissspidy Mar 30 '18 at 10:54
  • Yeah, that is better! :) Thank you, this is excellent. – user8463989 Mar 30 '18 at 12:36
3

Assuming the left/right elements are siblings, have you considered a CSS-only solution? Instead of adding a class in the output, you could just style the output without a class.

<div id="your-content">
    <p>Left</p>
    <p>Right</p>
    <p>Left</p>
    <p>Right</p>
</div>

#your-content p {
    [styles for making all of them left]
}

#your-content p:nth-child(even) {
    [styles for making the even-numbered ones right]
}
| improve this answer | |

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