styling bootscore category badge

[ersingo]

Hello Basti,

This question is actually not related to your theme. But I still wanted to ask. I understand if you don't answer. 😊 😇

// Category Badge
if (!function_exists('bootscore_category_badge')) :
  function bootscore_category_badge() {
    // Hide category and tag text for pages.
    if ('post' === get_post_type()) {
      echo '<p class="category-badge">';
      $thelist = '';
      $i       = 0;
      foreach (get_the_category() as $category) {
        if (0 < $i) $thelist .= ' ';
        $thelist .= '<a href="' . esc_url(get_category_link($category->term_id)) . '" class="badge bg-primary-subtle text-primary-emphasis text-decoration-none">' . $category->name . '</a>';
        $i ++;
      }
      echo $thelist;
      echo '</p>';
    }
  }
endif;
// Category Badge End

I want to give a different color for each category. can i do this? can you give an example? For example, the news category will have a red badge, and the sports category badge will be blue.

[crftwrk]

Hi Ersin,

this is a good question. You cannot change this by the function, but you can search for the category name inside the badges with jQuery and change classes of each of them. Make sure that code is inside the jQuery(function ($) { ... }); wrapper in your child's custom.js.

// Category badge colors
$('.badge:contains("News")').closest('.badge').removeClass('bg-primary-subtle text-primary-emphasis').addClass('text-bg-danger');
$('.badge:contains("Sports")').closest('.badge').removeClass('bg-primary-subtle text-primary-emphasis').addClass('text-bg-primary'); // if your primary color is blue

Change classes as you want.

Solved?

[ersingo]

I've saved it here now.

js/custom.js

but it didn't work.

jQuery(function ($) {

    // Do stuff here
// Category badge colors
$('.badge:contains("News")').closest('.badge').removeClass('bg-primary-subtle text-primary-emphasis').addClass('text-bg-danger');
$('.badge:contains("Sports")').closest('.badge').removeClass('bg-primary-subtle text-primary-emphasis').addClass('text-bg-primary'); // if your primary color is blue

}); // jQuery End

[ersingo]

I think the problem was me. currently worked. I cleared browser memory. I've tried a lot. I guess I should take a break :)

Thank you very much Basti. You are great. enjoy your work.

[ersingo]

I was going to ask the same question for tags :) but I saw that tags also work. Wonderful. 😍 😊 👍 🙋

Basti lastly, I would like to ask, should I do it separately for more than one category or tag in the same color? or is there another way? it didn't work that way. Should I do uppercase and lowercase letters separately?

$('.badge:contains("Webmaster, webmaster")').closest('.badge').removeClass('bg-primary-subtle text-primary-emphasis').addClass('text-bg-primary');

[crftwrk]

should I do it separately for more than one category or tag in the same color? or is there another way?

I would create for each category/tags a separate line, even it is the same color. More clear.