Add class to div wrapped around custom post type based off posts category

Question

I'm looking for a way to inject a class into a div wrapped around a custom post type based off the category that post is attributed to.There will be three categories;

ebook (class name cat1)
infographic (class name cat2)
case study (class name cat3)

Here is my code so far to call the custom post type. Currently, the page displays all posts as the last category - case study (cat3).

        <?php $loop = new WP_Query( array( 'post_type' => 'resources', 'posts_per_page' => -1 ) ); ?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

            <?php
            $post = $wp_query->post;

            if ( in_category('ebook', $post->ID) ) { ?>
                <div <?php body_class('tile scale-anm cat1 all end'); ?>>
                    <section class="small-12 medium-4 large-3 columns end">
                        <section class="grid">
                            <figure class="effect-sarah">
                                <img src="<?php the_field('img'); ?>" alt="img13"/>
                                <figcaption>
                                    <h2>Resource</h2>
                                    <p class="signika"><?php the_field('desc'); ?></p>
                                    <p class="bold"><?php the_field('btnText'); ?></p>
                                    <a href="<?php echo esc_url( get_permalink() ); ?>" target="_blank"><?php the_field('btnText'); ?></a>
                                </figcaption>           
                            </figure>
                        </section>
                    </section>
                </div> 
            <?php
            } 


            elseif ( in_category('infographic', $post->ID) ) { ?>
                <div <?php body_class('tile scale-anm cat2 all end'); ?>>
                    <section class="small-12 medium-4 large-3 columns end">
                        <section class="grid">
                            <figure class="effect-sarah">
                                <img src="<?php the_field('img'); ?>" alt="img13"/>
                                <figcaption>
                                    <h2>Resource</h2>
                                    <p class="signika"><?php the_field('desc'); ?></p>
                                    <p class="bold"><?php the_field('btnText'); ?></p>
                                    <a href="<?php echo esc_url( get_permalink() ); ?>" target="_blank"><?php the_field('btnText'); ?></a>
                                </figcaption>           
                            </figure>
                        </section>
                    </section>
                </div> 
            <?php
            } 


            elseif ( in_category('casestudy', $post->ID) ) { ?>
                <div <?php body_class('tile scale-anm cat3 all end'); ?>>
                    <section class="small-12 medium-4 large-3 columns end">
                        <section class="grid">
                            <figure class="effect-sarah">
                                <img src="<?php the_field('img'); ?>" alt="img13"/>
                                <figcaption>
                                    <h2>Resource</h2>
                                    <p class="signika"><?php the_field('desc'); ?></p>
                                    <p class="bold"><?php the_field('btnText'); ?></p>
                                    <a href="<?php echo esc_url( get_permalink() ); ?>" target="_blank"><?php the_field('btnText'); ?></a>
                                </figcaption>           
                            </figure>
                        </section>
                    </section>
                </div> 
            <?php
            }

            ?>          

        <?php endwhile; wp_reset_query(); ?>

WheatBeak WheatBeak · Accepted Answer · 2017-07-26T17:58:29

DRY, Don't repeat yourself. There are also some problems with your loop.

After using WP_Query, use wp_reset_postdata() not wp_reset_query().

get rid of $post = $wp_query->post;, get the id from in the loop using get_the_ID()

Then we check the category and assign the class name to a variable $catclass, which we insert into the argument for body_class(), note the use of " instead of '

try this out:

<?php $loop = new WP_Query( array( 'post_type' => 'resources', 'posts_per_page' => -1 ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php
    $catclass = "";
    if (in_category('ebook', get_the_ID())) {
        $catclass="cat1";
    } else if(in_category('infographic', get_the_ID())) {
        $catclass="cat2";
    } else if(in_category('casestudy', get_the_ID())){
        $catclass="cat3";
    }
?>

    <div <?php body_class("tile scale-anm {$catclass} all end"); ?>>
        <section class="small-12 medium-4 large-3 columns end">
            <section class="grid">
                <figure class="effect-sarah">
                    <img src="<?php the_field('img'); ?>" alt="img13"/>
                    <figcaption>
                        <h2>Resource</h2>
                        <p class="signika"><?php the_field('desc'); ?></p>
                        <p class="bold"><?php the_field('btnText'); ?></p>
                        <a href="<?php echo esc_url( get_permalink() ); ?>" target="_blank"><?php the_field('btnText'); ?></a>
                    </figcaption>           
                </figure>
            </section>
        </section>
    </div> 
<?php
endwhile; 
wp_reset_postdata(); ?>

If you're really feeling frisky you can replace the if/else statements with:

switch(true){
    case in_category('ebook', get_the_ID()):
    $catclass = "cat1";
    break;
    case in_category('infographic', get_the_ID()):
    $catclass = "cat2";
    break;
    case in_category('casestudy', get_the_ID()):
    $catclass = "cat3";
    break;
    default:
    $catclass = "";
}

Add class to div wrapped around custom post type based off posts category

1 Answers