Display post category index

Uses a shortcode to display a grid of post categories. It includes the category image if you’ve defined one in the category settings.

Shortcode name: bb_custom_category_loop

function bb_custom_category_loop_shortcode() {
    $categories = get_categories();
    $output = '<div class="bb-custom-cat-loop">';

    foreach ($categories as $category) {
        $category_link = get_category_link($category->term_id);
        $image_id = get_term_meta($category->term_id, 'kwp-tax-image-id', true);
        $category_image = $image_id ? wp_get_attachment_image_src($image_id, 'large') : '';

        $output .= '<div class="category">';

        if ($category_image) {
            $output .= '<a href="' . esc_url($category_link) . '"><img src="' . esc_url($category_image[0]) . '" alt="' . esc_attr($category->name) . '"></a>';
        }

        $output .= '<h2><a href="' . esc_url($category_link) . '">' . esc_html($category->name) . '</a></h2>';
        $output .= '<p>' . esc_html($category->description) . '</p>';
        $output .= '<a href="' . esc_url($category_link) . '" class="button">View Category</a>';

        $output .= '</div>';
    }

    $output .= '</div>';
    return $output;
}

add_shortcode('bb_custom_category_loop', 'bb_custom_category_loop_shortcode');

.bb-custom-cat-loop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1.5em;
}

.bb-custom-cat-loop .category {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}

.bb-custom-cat-loop .category img {
  max-width: 100%;
  height: auto;
}

.bb-custom-cat-loop .category h2 {
  margin: 0.5em 0;
}

.bb-custom-cat-loop .category .button {
  margin-top: auto;
}