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

July 31, 2024

WordPress Categories with post count

The 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

Advert

Leave a Reply

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

WordPress Categories with post count
This website uses cookies to improve your experience. By using this website you agree to our Data Protection Policy.
Read more