<?php 
    $homePosts = new WP_Query(array(
        'posts_per_page' => 5                       
    ));

    while ($homePosts->have_posts()) {
      $homePosts->the_post(); ?>

    <section class="align-right>
        <div class="content">
            <?php the_title(); ?>
            <?php the_content(); ?>                                 
        </div>
    </section>

<?php } wp_reset_postdata(); ?>

The above code is part of my front-page.php. I am trying to modify the class that is in <section class="align-*****">, so that the 1st, 3rd, and 5th sections have class='align-left' and the 2nd, and 4th sections have class='align-right'.

What would be the best approach to modify the class values within a WordPress loop? Would I need to write my own function in functions.php? Use jQuery? Is there a WP function that can help with this?

<?php 
    $homePosts = new WP_Query(array(
        'posts_per_page' => 5                       
    ));

    while ($homePosts->have_posts()) {
      $homePosts->the_post(); ?>

    <section class="align-right>
        <div class="content">
            <?php the_title(); ?>
            <?php the_content(); ?>                                 
        </div>
    </section>

<?php } wp_reset_postdata(); ?>

The above code is part of my front-page.php. I am trying to modify the class that is in <section class="align-*****">, so that the 1st, 3rd, and 5th sections have class='align-left' and the 2nd, and 4th sections have class='align-right'.

What would be the best approach to modify the class values within a WordPress loop? Would I need to write my own function in functions.php? Use jQuery? Is there a WP function that can help with this?

• functions

1 Answer 1

<?php 
$homePosts = new WP_Query(array(
    'posts_per_page' => 5                       
));

$count = 1;

while ($homePosts->have_posts()) {
  $homePosts->the_post(); 

    if ( $count % 2 == 0 ) {
        $class = 'right';
    } else {
        $class = 'left';
    }

?>

<section class="align-<?php echo $class; ?>" >
    <div class="content">
        <?php the_title(); ?>
        <?php the_content(); ?>                                 
    </div>
</section>

<?php 
$count++;

} wp_reset_postdata(); 

?>

You can try this code