How to leave each category a color in wordpress?

Question

I am trying to color the background of the link of each category, leaving each one of a color, but I wanted you to style ONLY the links of the categories on the homepage, I do not want to change the style on the page of the categories. It’s something I’m trying to do:

I was wondering if you could do that and if you could help me. That’s my code so far:

<div class="col-md-4">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="artigo">
<div class="post-header"><?php the_post_thumbnail( 'large'); ?></div> 

<div class="icons-categ"><?php the_category('') ?></div>
</div>



<?php endwhile?>    <?php else: ?>    <?php endif; ?>   

</div>

This is the code of the categories I have in css, but it doesn’t seem to work:

.category-noticias .icons-categ {
    background: #e07737;
    color:#fff;
}

.category-celebridades .icons-categ {
    background: #1865e4;
    color:#fff;
}

.category-musicas .icons-categ {
    background: #aa0909;
    color:#fff;
}

.category-filmes .icons-categ {
    background: #b6e037;
    color:#fff;
}

Note: I am using wordpress and bootstrap

Answer 1

You can do this using the function get_the_category() in place of the_category(). There’s only one problem and I don’t know if you thought about it, but what if a post belongs to two or more categories? What color will you use? I’m asking this because the function get_the_category() will return all categories of post then as you didn’t mention this possibility, my solution to solve this will be to use the color of the first category of post, is not the best solution but I believe it helps a lot.

<div class="col-md-4">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div class="artigo">
            <div class="post-header"><?php the_post_thumbnail( 'large'); ?></div> 
            <?php $categories = get_the_category(); ?>
            <?php $category = (count($categories) > 0 ? $categories[0] : null); ? // Caso tenha categoria eu pego a primeira>
            <?php if (null !== $category): // Só vamos exibir essa parte se tiver categoria ?>
                <!-- Vamos criar a classe de cada elemento dinamicamente utilizando o slug da categoria -->
                <div class="icons-categ category-<?php echo $category->slug; ?>"><?php echo $category->name; ?></div>
            <?php endif; ?>
        </div>
    <?php endwhile?>    
    <?php else: ?>    
        <!-- Mensagem de que não existe posts ou algo do tipo -->
    <?php endif; ?>   
</div>

.icons-categ {
    color:#fff;
}

.category-noticias {
    background: #e07737;
}

.category-celebridades {
    background: #1865e4;
}

.category-musicas {
    background: #aa0909;
}

.category-filmes {
    background: #b6e037;
}