
Author Bio Box CSS in WordPress
July 30, 2024
Using the currentColor property to change SVG color
July 31, 2024
The shortcode displays a list of categories with post count on your WordPress site. This helps you see the spread of posts across categories and jump to the content you want.
PHP for Categories with post count
// ---------------------------------------------------------- //
// Snippflow Categories with post count //
// ---------------------------------------------------------- //
function sf_categories_with_post_count() {
$categories = get_categories();
$output = '<ul class="sf-categories">';
foreach ($categories as $category) {
$output .= '<li><a href="' . esc_url(get_category_link($category->term_id)) . '">' . $category->name . '<span>' . $category->count . '</span></a></li>';
}
$output .= '</ul>';
return $output;
}
add_shortcode('sf_categories_with_post_count', 'sf_categories_with_post_count');
CSS
/* ---------------------------------------------------------- */
/* Snippflow Categories with post count */
/* ---------------------------------------------------------- */
.sf-categories { display:flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.sf-categories li { position: relative; padding: 0; }
.sf-categories li a { display: flex; background-color: #fff; color: #000; border-radius: 8px; padding: 10px 16px; font-size: 1rem; text-decoration: none; transition: all .2s ease-in-out; }
.sf-categories li a span { display: block; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); padding: 3px 8px; font-size: 0.85rem; line-height: 1; background-color: rgba(0,0,0,.05); border-radius: 4px; }
.sf-categories li a:hover { background-color: #46A787; color: #fff; }
.sf-categories li a:hover span { background-color: rgba(255,255,255,.1); color: #fff; }
How to use Categories with post count?
Just by adding Shortcode below
[sf_categories_with_post_count]
– display categories list with post count