I have styled my category tags to be different colours from one another. Design is RED, Copy Writing is BLUE and Inspiration is GREEN. I’ve managed to do this through WordPress’ category specific style tag. But if more than one category is used the colour displayed is the last one to appear in the CSS. i.e if design and Copywriting is ticked then the colour automatically gets the Copy Writing style because that comes last in the CSS.
If there are more than one category ticked, is there a way to display a different colour altogether, lets say Grey.
As you can see in the code below the category styles are working but I need to somehow detect that there is more than one category and make a new style.
The tag I’m using to get the category name allowing me to style;
(<?php post_class(); ?>)
What I’m seeing if two categories are ticked – the two ticked categories ‘category-design’ and ‘category-inspiration’;
<div id="post-98" class="post-98 post type-post status-publish format-standard has-post-thumbnail hentry category-design category-inspiration">
Here are my styles for the three categories;
/*Design*/
.category-design {
background-color: #f2334c;
}
/*Copy Writing*/
.category-copy-writing {
background-color: #446DB4;
}
/*Inspiration*/
.category-inspiration {
background-color: #0DB267;
}
This is the code I am using on the page;
<div>
<h5><?php the_category(', '); ?></h5>
</div>
You can hook to
post_classfilter a function that checks the presence of multiple categories and add another one to help you out. Something like this:Hope it helps!