WordPress: Remove brackets around Category Post counts

[box] CMS: WordPress  - Difficulty: Normal  - Time: 3 min [/box]

I am not sure, if below snippet of code is useful for average WordPress users, However, It would come in handy for a lot of WordPress designers. By default when you display the WordPress Categories with count, it wraps the count the with brackets i.e ” (12) ” – And there is barely any way you can style it to your liking as you can see in the below screenshot.

The below snippet of code does two things. First, it removes the brackets around the count number, Second, it replaces brackets with ‘span tag’ around the count. So that you can style the count with CSS to your liking.

<ul>
<?php
	$args = array (
		'echo' => 0,
		'show_count' => 1,
		'title_li' => '',
		'depth' => 1
	);
	$variable = wp_list_categories($args);
	$variable = str_replace ( "(" , "<span>", $variable );
	$variable = str_replace ( ")" , "</span>", $variable );
	echo $variable;
?>
</ul>

You can either put above code directly into your theme, Or you can also put this code in the WordPress text widget. However to run PHP in WordPress text widget you would have to follow this short tutorial.

Below is the CSS code that I have used in above example for ‘count’ wrapped in span tag.

.widget ul li span {
    background-color: #999999;
    border-radius: 10px 10px 10px 10px;
    color: white;
    cursor: default;
    float: right;
    font-size: 9px;
    height: 15px;
    line-height: 15px;
    margin-right: 10px;
    margin-top: -28px;
    position: relative;
    text-align: center;
    width: 28px;
}

.widget ul li span:hover {
    background-color: #000;
}