Post Badge Color By Category

badge colors

A little over a year ago, shortly after Elementor gave us the cool Post Cards Skin, I tried it out and made a comment about it over on the Facebook Elementor Community group. I mentioned that I wished the Post Badges could be different colors, based on which category the badge represented.

A year went by without any attempt on my part to see if I could solve this problem on my own. Today, I noticed again how useful this feature would be, so I decided to code some CSS to make it happen. It works, and I wanted to share it with you, in case you have a need for it.



Note: If a post has more than one category, it will choose the one listed last in the source, so you’ll either need to live with that, don’t use multiple categories, or come up with better code.

Make A List of Categories

I started out by making a list of all my category slugs. I only have eight on the site I was working on. If you have dozens, this process might be less than fun. Anyway, I made a list of categories, and decided which color I wanted each badge to be. Then I simply wrote a series of 8 CSS rulesets to color code the badges.

My list looked like this:

general-absurdity #7e158c
blue-apron-meal-kits #e40000
daily-life #2085ec
hello-fresh-meal-kits #ccc000
home-chef-meal-kits #001ece
news #008400
serious-matters #333333
uncategorized #7c7c7c

Simple. I was ready.

The CSS Code

In this example, let’s use my general-absurdity and my serious-matters categories. The class assigned to each is .category-general-absurdity and .category-serious-matters. (You’ll just put category- in front of your category slugs).

With your list of category classes and associated colors on hand, put the following CSS code in your Customizer’s Additional CSS area, and you’ll have category custom colored badges on all your Post Card Skinned archives. (Of course, you’ll want to change the category class names and associated colors to match yours).

.category-serious-matters .elementor-post__badge {
background-color: #333333 !important;
}

.category-general-absurdity .elementor-post__badge {
background-color: #7e158c !important;
}

The Results

Below is a screenshot of posts from those two categories on my DonnaCavalier.com site.

badge colors

As you can see, the General Absurdity category has a purple badge and the Serious Matters category has a soft black badge.

This is exactly what I was wishing for. I now need to go make a similar change to this WPDesignDuo site, don’t you think?

I hope this helps some of color code your Elementor Post Badges by category. If you have any suggestions or comments, leave them below!

2 thoughts on “Post Badge Color By Category

Leave a Reply

Your email address will not be published. Required fields are marked *