Author Bio Box in WordPress
July 30, 2024Using the currentColor property to change SVG color
July 31, 2024The shortcode is used to display a list of categories along with their respective post counts on a WordPress site. This helps users quickly see the distribution of posts across different categories and navigate to the content they are interested in.
PHP
// ---------------------------------------------------------- //
// 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?
1. Adding Shortcode
[sf_categories_with_post_count]
– display categories list with post count