Showcase Blog Categories using a Shortcode

This guide shows you how to create a custom shortcode to display blog categories on any page.

Step 1: Create a Custom Shortcode for Categories Grid

Add this to your child theme functions.php:

function uicore_category_grid_shortcode() {
    $categories = get_categories();
    $output = '<div class="category-grid">';
    foreach ( $categories as $category ) {
        $category_link = get_category_link( $category->term_id );
        $output .= '<div class="category-box">';
        $output .= '<a href="' . esc_url( $category_link ) . '">';
        $output .= '<h3>' . esc_html( $category->name ) . '</h3>';
        $output .= '</a>';
        $output .= '</div>';
    }
    $output .= '</div>';
    return $output;
}
add_shortcode('category_grid', 'uicore_category_grid_shortcode');

This function creates a custom shortcode [category_grid] that displays blog categories in a grid layout. Here's what it does:

• get_categories() fetches all categories with at least one published post (by default, WordPress excludes empty categories).
• It loops through each category and:
• The individual boxes are wrapped inside a parent
  for layout and styling purposes.
• The function is registered as a shortcode using add_shortcode(), allowing you to place [category_grid] on any page or post.

Step 2: Add Styling

Go to Theme Options - Custom CSS, and paste:

.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 20px;
}
@media(max-width:768px) {
  .category-grid {
    grid-template-columns: 1fr;
  }
}
.category-box {
  background: #f9f9f9;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.category-box:hover {
  background: #fff;
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

Step 3: Add the Shortcode to your page

Insert this into a Shortcode Widget:

[category_grid]