How to use 2 div class in single PHP Loop code

Question

I'm converting a theme from HTML Template to Dynamic for WordPress theme.

I've created several custom post type like, Services, Slides, Team etc. Now, my problem is I can't design the services like the HTML template. Because, the template use 2 DIV class. One of them is " service wow fadeInUp " and another one is " service wow fadeInDown ".

Example:
Text 1 = service wow fadeInUp
Text 2 = service wow fadeInDown
Text 3 = service wow fadeInUp
Text 4 = service wow fadeInDown
* continue......... *

But when, I use PHP code for showing Services (custom post type) in my index.php it comes with only one DIV class. I don't know how to use 2 DIV class in single PHP code for showing my Custom Post Type. I'm newbie in PHP language. It will be very helpful for me if anyone solve this problem for me and give me some description about how to do it. My codes are given below:

functions.php

// add services

    register_post_type ('tservices', array(
        'labels' => array(
            'name' => 'Services',
            'add_new_item' => 'Add New Service'
            ),
        'public' => true,
        'supports' => array('title', 'editor',)
    ));

index.php

<div class="col-sm-3">

                    <?php
                        $thservices = new WP_Query(array(
                            'post_type' => 'tservices',
                            'order'   => 'ASC'
                        ));
                    ?>
                    <?php while($thservices->have_posts()) : $thservices->the_post(); ?>


                        <div class="service wow fadeInUp">
                            <div class="service-icon"><?php echo get_post_meta($post->ID, 'faicon', true); ?></i></div>
                            <h3><?php the_title(); ?></h3>
                            <?php the_content(); ?>...

                            <a class="big-link-1" href="services.html">Read more</a>
                        </div>

                    <?php endwhile; ?>


                    </div>

If you notice, you will find only one div class available there. How can I add the 2nd div class in it ? Help me please !

Don't want to answer, because this is not a php/WP issue, but css. Instead of adding two classes, change your CSS to address .service.wow:nth-child(2n) and .service.wow:nth-child(2n+1) instead of fadeInUp and fadeInDown. — skobaljic

beercohol beercohol · Accepted Answer · 2016-09-13T20:38:37

@skobaljic's comment above is one (arguably neater) solution, but if you want to keep your existing CSS classes and do the alternation entirely in PHP, here's how to do it.

Basically you keep the alternating class name in a variable, and change it for each iteration of the loop:

<div class="col-sm-3">

<?php
    $thservices = new WP_Query(array(
        'post_type' => 'tservices',
        'order'   => 'ASC'
    ));
?>
<?php while($thservices->have_posts()) :
    $thservices->the_post();
    if($divclass == "fadeInUp") { $divclass = "fadeInDown"; }
    else { $divclass = "fadeInUp"; }
    ?>

    <div class="service wow <?=$divclass?>">
        <div class="service-icon"><?php echo get_post_meta($post->ID, 'faicon', true); ?></i></div>
        <h3><?php the_title(); ?></h3>
        <?php the_content(); ?>...

        <a class="big-link-1" href="services.html">Read more</a>
    </div>

<?php endwhile; ?>

</div>

Note that I'm using PHP's short output tag <?= - this is pretty much equivalent to print or echo, but it looks neater to me. See here for a discussion on its merits: https://softwareengineering.stackexchange.com/questions/151661/is-it-bad-practice-to-use-tag-in-php I also assume you're using PHP 5.4+. If not you might need to enable the short tags option, or change the code to use print or echo.

How to use 2 div class in single PHP Loop code

1 Answers