CODEWITHSUNDEEP
phpwordpress
Sajal
Sajal

Reputation: 305

How to add a class for every second div in a row

I would like to add one class for every second item in a row, please help, Thanks in advance

Adding some dummy content to fulfill its criteria 

<?php $counter = 1 ?> 
     <div class="services-posts mt2 pull-right">
      <?php
       $args = array( 'post_type' => 'services');
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post(); ?>
            <?php $featured_img_url = get_the_post_thumbnail_url('full');  ?>
                <div class="col-sm-4 <?php if ($counter % 2 == 0) : ?> animation-fadeInUp <?php endif; ?> <?php if ($counter % 1 == 0) : ?> animation-fadeInLeft <?php endif; ?> <?php if ($counter % 3 == 0) : ?> animation-fadeInRight <?php endif; ?> "  >
                    <?php if (has_post_thumbnail( $post->ID ) ): ?>
                    <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
                    /*I need to add a class to the each second box-div2 div */
                     <div style="background-image: url('<?php echo $image[0]; ?>')"   class="box-div2">
                     <?php endif; ?>
                    <div class="c-div">
                        <a href="">
                            <h4><?php the_title(); ?></h4>
                            <span>
                                <?php the_content(); ?>
                            </span>
                    </a>
                        </div>
                    </div>
                </div>
                 <?php if ($counter % 3 == 0){echo '</div><div class="services-posts mt2 pull-right">';} ?> 
                  <?php $counter++ ; ?>
                <?php endwhile; ?>

Upvotes: 0

Views: 2828

Answers (4)

Balwant
Balwant

Reputation: 755

Use this, I have created a variable $divclass which will add the class accordingly.

Replace:

/*I need to add a class to the each second box-div2 div */
<div style="background-image: url('<?php echo $image[0]; ?>')"   class="box-div2">

With:

<?php 
    $divclass="";
    if ($counter%2==0) {
        $divclass="box-div2";
    }
?>
<div style="background-image: url('<?php echo $image[0]; ?>')"   class="<?php echo $divclass;?>">

Upvotes: 1

dhinchliff
dhinchliff

Reputation: 1194

I'm not what's your reason to do this is, but if it's for styling purposes CSS allows you to select even/odd elements:

a:nth-child(odd) {
    background: green;
}

a:nth-child(even) {
    background: red;
}

Using a formula (an + b) you can even use other cycles, not just odd/even.

On the other hand if it's for programmatic reasons jQuery has odd/even selectors too:

$("tr:odd").css("background-color", "green");
$("tr:even").css("background-color", "red");

So generally you don't need classes to separate odd/even elements.

Upvotes: 1

Algy Taylor
Algy Taylor

Reputation: 834

As a rough all-things solution, you can use the ternary operator plus the modulo operator:

<?php echo (($counter % 2 == 0) ? $theThingYouWantToEcho : null) ?>

The code inside the brackets says:

  • if $counter / 2 is a whole number (has no remainder when divided)
  • then return $theThingYouWantToEcho
  • else return null (nothing)

The echo statement will then print out the result of that.

You could replace $theThingYouWantToEcho with the CSS class you want to add

i.e.

<div class="<?php echo (($counter % 2 == 0) ? 'myClass' : null) ?>">...</div>

Upvotes: 1

epierpont
epierpont

Reputation: 321

Are you referring to every second query result? If so this should work:

<?php $div2_class = $counter % 2 == 0 ? 'your-class' : ''; ?>
<div style="background-image: url('<?php echo $image[0]; ?>')" class="box-div2 <?php echo $div2_class; ?>">

Upvotes: 1

Related Questions