Inside a loop, how to change CSS class based on category name?

Question

This is my first post here. I am struggling with a new situation for me, as a WP Developer.

I have a loop that lists some posts. These posts can be published in different categories. I need to style the name of the displayed category based on which category it is. For example: Video will be written with black background and white text-color. Audio will be written with green background and white text-color.

I need to get the name of the category and apply a CSS class. Here is my current fragment of code:

<div class="row">
<?php 
    $args = array('post_type'=>'post', 'showposts'=>8, 'category_name'=>'noticias'); 
    $noticias = get_posts($args); 
    if($noticias) : foreach($noticias as $post) : setup_postdata($post);            
?>

<div class="col-xl-3 col-lg-4 col-md-4 col-sm-6 n-container-sm">
    <h3 class="titulo_post_pequeno">
        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
    </h3> 

    <p><span class="categoria_post cat-geral"><?php foreach((get_the_category()) as $category) { echo $category->cat_name;}?></span> / <span class="date-post-peq">EM <?php the_time('d/m/y'); ?></span></p>
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                <?php if ( has_post_thumbnail() ) { 
                    the_post_thumbnail('img-noticia', ['class'=>'img-fluid img-destaque'] ); 
                }  else { 
                    echo '<img class="img-fluid img-destaque" src="'.get_bloginfo("template_url").'/img/none_noticia.jpg">';
                } 
                ?>
            </a>
            <a href="<?php the_permalink(); ?>" class="btn btn-primary btn-read">Leia +</a>
        </div>
    <?php
        endforeach;
        endif;
    ?> 
    </div>

Is your foreach((get_the_category()) as $category) echoing anything? If it's giving you the categories, I'd suggest moving it to the outer div. Just place it inside of the class list and then you'll also have the category name as a class on the outer div, which you can target for styling. — WebElaine
– WebElaine, Commented May 7, 2018 at 19:41

cjbj · Accepted Answer · 2018-05-08 12:55:18Z

What you need is post_class, a function that will add several classes linked to the post. You would use it in the main div around your loop and you can also add your own classes. In your case:

<div ?><?php post_class ("col-xl-3 col-lg-4 col-md-4 col-sm-6 n-container-sm") ?> >

This will add the category name as a class to the div, which you can then use in your css.

Related: also look into body_class.

EDIT: an addition

If you have an elaborate category hierarchy, you may want to base the classes on parent categories, because your users will be adding new categories (say 'hiphop' and 'tango' to the 'videos' category). In that case you will have to add some code to retrieve the parent categories and rewrite them into a certain format like this:

$all_cats = get_the_category ($post->ID);
$all_parents = '';
foreach ($all_cats as $cat) {
    $all_parents .= get_category_parents ($cat, false, '-parent-cat ');
    }
$all_parents = strtolower ($all_parents);

Now you can add $all_parents to your post_class:

<div ?><?php post_class ($all_parents . " col-xl-3 col-lg-4 col-md-4 col-sm-6 n-container-sm") ?> >

Stack Exchange Network

Inside a loop, how to change CSS class based on category name?

1 Answer 1

Your Answer

Hot Network Questions

Inside a loop, how to change CSS class based on category name?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions