Category badge customization

[phrizm]

Hello Basti, once again thanks for providing this great theme.

My question is: how can i customize my post category badges?

Let's suppose i have some "travels" and "guides" options, can i do it via Scss?

I have searched around, and tryed some, but none worked, since there is no "id" or post class generation.

Thanks once again, im sure its my lack of php knowledge.

[crftwrk]

Hi,

thank you! The category badge is a pluggable function in https://github.com/bootscore/bootscore/blob/main/inc/template-tags.php. You can simply override this in your child's functions.php. Note that text-bg-{color} classes are new in Bootstrap 5.2.0. If you are using an earlier version, you must use bg-{color} instead.

function bootscore_category_badge() {
  if ('post' === get_post_type()) {
    echo '<div class="category-badge mb-2">';
    $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 text-bg-secondary text-decoration-none">' . $category->name . '</a>';
      $i++;
    }
    echo $thelist;
    echo '</div>';
  }
}

But I think you want to style them individually for each category, right? So, let's search for the badge which contains a category name and change text-bg-{color} classes with JS. Code goes to child's js/custom.js inside the jQuery(function ($) { ... }); wrapper:

// Category badge colors
$('.badge:contains("Travels")').closest('.badge').removeClass('text-bg-secondary').addClass('text-bg-success');
$('.badge:contains("Guides")').closest('.badge').removeClass('text-bg-secondary').addClass('text-bg-danger');

Solved?

[phrizm]

Its worked!
And thanks a lot.
But can i use sass / css in some way? For deep customization? Like define "my class" and call it into JS?
If no its all ok! Its works anyway.
Thanks for your kind reply <3

[crftwrk]

Of course, you can add custom classes. and style them individually.

$('.badge:contains("Travels")').closest('.badge').removeClass('text-bg-secondary').addClass('my-class-1');
$('.badge:contains("Guides")').closest('.badge').removeClass('text-bg-secondary').addClass('my-class-2');

.badge.my-class-1 {
  background: red;
  padding: 20px;
  border: 3px solid green;
}

.badge.my-class-2 {
  background: blue;
  padding: 10px;
  border: 3px dashed lime;
}