Site logo

Archived topic

Targeting Sidebar CSS

3 replies · Started by Milo Lam on May 27, 2021

Viewing posts 1–4 of 4

Hi,
I'm trying to redesign my category archive sidebar to look like this. Here is where I'm at. I'm not sure exactly where/how the number would be targeted to do a CSS write-up?

My site link and directory authentication are in the private area.

Thanks

Hi there,

you can use this PHP Snippet to filter the post count variable:

function db_categories_postcount_filter ($variable) {
   $variable = str_replace('(', '<span class="post-count">', $variable);
   $variable = str_replace(')', '</span>', $variable);
   return $variable;
}
add_filter('wp_list_categories','db_categories_postcount_filter');

This will remove the ( ) parenthesis from the number and return the HTML like so:

<span class="post-count">1</span>

So you can target it with CSS:

.cat-item .post-count {
    /* your styles here */
}

How to add PHP: https://docs.generatepress.com/article/adding-php/

Worked beautifully. Thanks David!

Glad to hear that!

This archived topic is closed to new replies.