Author Bio Box CSS in WordPress
Author Bio Box CSS in WordPress
July 30, 2024
Using the currentColor property to change SVG color
Using the currentColor property to change SVG color
July 31, 2024

July 31, 2024

WordPress Categories with post count

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Level Up Your Coding Skills

Get the best CSS, HTML, and JS snippets delivered to your inbox monthly. 🚀
No spam—just coding gold! 💻✨"

We don’t spam! Read our privacy policy for more info.

cookie
This website uses cookies to improve your experience. By using this website you agree to our Data Protection Policy.
Read more