Create Shortcode to display a list of WordPress Post Categories with post counts

Here is a shortcode that you can use to display a list of WordPress post categories with post counts:

function category_post_count_shortcode() {
    $args = array(
        'orderby' => 'name',
        'hide_empty' => 0
    );
    $categories = get_categories($args);
    $output = '<ul>';
    foreach($categories as $category) {
        $output .= '<li><a href="' . get_category_link($category->term_id) . '">' . $category->name . ' (' . $category->count . ')</a></li>';
    }
    $output .= '</ul>';
    return $output;
}
add_shortcode('category_post_count', 'category_post_count_shortcode');

You can then use the shortcode [category_post_count] in your posts or pages to display the list of categories with post counts.

You can customize the shortcode by adjusting the arguments passed to get_categories() function and the output HTML.

display the categories in 3 columns and be responsive

Here is an updated version of the shortcode that will display the categories in 3 columns and be responsive:

function category_post_count_shortcode() {
    $args = array(
        'orderby' => 'name',
        'hide_empty' => 0
    );
    $categories = get_categories($args);
    $output = '<div class="category-list-wrap"> <div class="category-list-inner"> <ul class="category-list-grid">';
    $count = 0;
    foreach($categories as $category) {
        if($count % 3 == 0 && $count != 0){
            $output .= '</ul><ul class="category-list-grid">';
        }
        $output .= '<li><a href="' . get_category_link($category->term_id) . '">' . $category->name . ' <span class="post-count">(' . $category->count . ')</span></a></li>';
        $count++;
    }
    $output .= '</ul></div></div>';
    return $output;
}
add_shortcode('category_post_count', 'category_post_count_shortcode');

This shortcode will divide the list of categories into 3 columns and wrap it with two divs, one for responsive and the other for grid layout. You can adjust the class names and the CSS accordingly to fit it to your theme design.

You will also need to add some CSS to your stylesheet in order to make it responsive and to display the categories in 3 columns. Here is an example of CSS that you can use:

.category-list-wrap {
    display: flex;
    flex-wrap: wrap;
}

.category-list-inner {
    width: 100%;
}

.category-list-grid {
    width: 33.33%;
    float: left;
    list-style: none;
}

.category-list-grid li {
    margin-bottom: 10px;
}

@media only screen and (max-width: 600px) {
    .category-list-grid {
        width: 100%;
        float: none;
    }
}

This CSS will make sure that the categories are displayed in 3 columns and will stack vertically when viewed on smaller screens.

display the categories in 3 columns and will show the list of posts below each category

Here’s an updated version of the shortcode that will display the categories in 3 columns and will show the list of posts below each category:

function category_post_count_shortcode() {
    $args = array(
        'orderby' => 'name',
        'hide_empty' => 0
    );
    $categories = get_categories($args);
    $output = '<div class="category-list-wrap"> <div class="category-list-inner"> <ul class="category-list-grid">';
    $count = 0;
    foreach($categories as $category) {
        if($count % 3 == 0 && $count != 0){
            $output .= '</ul><ul class="category-list-grid">';
        }
        $output .= '<li><a href="' . get_category_link($category->term_id) . '">' . $category->name . ' <span class="post-count">(' . $category->count . ')</span></a>';
        $output .= '<ul class="post-list">';
        $args = array(
            'category' => $category->term_id,
            'posts_per_page' => -1,
            'orderby' => 'date',
            'order' => 'DESC'
        );
        $posts = get_posts($args);
        foreach($posts as $post) {
            $output .= '<li><a href="' . get_permalink($post->ID) . '">' . $post->post_title . '</a></li>';
        }
        $output .= '</ul></li>';
        $count++;
    }
    $output .= '</ul></div></div>';
    return $output;
}
add_shortcode('category_post_count', 'category_post_count_shortcode');

This shortcode will create an unordered list of posts for each category using get_posts() function with the category parameter set to the current category’s ID. The post list will be nested inside the category list.

You will also need to add some CSS to your stylesheet to style the post list. Here is an example of CSS that you can use:

.post-list {
    margin-left: 20px;
    list-style: none;
}

This CSS will indent the post list by 20 pixels from the left and will remove bullet points.

You can adjust the shortcode and the CSS to fit your design and requirements. Also, note that this shortcode will only show all the post for each category, which can cause performance issues if you have a lot of posts, so you might want to limit the number of posts being shown for each category.

We hope this article assists you in creating a shortcode. If you have any suggestions, please leave a comment or contact us.

Join us on Facebook