By default, WordPress displays categories in a format like Cats, Pets, even when one category is a child of another. In this guide, you’ll learn how to display categories in the correct hierarchy format like Pets > Cats, with clickable links.
Step 1: Add the PHP Code
Add the following code to your functions.php file or insert it using a plugin like Code Snippets.
function manzari_category_hierarchy() {
$categories = get_the_category();
if (empty($categories)) return '';
$cat = $categories[0];
if ($cat->parent) {
$parent = get_category($cat->parent);
return '<span class="post-cats">
<a href="' . get_category_link($parent->term_id) . '">' . $parent->name . '</a>
>
<a href="' . get_category_link($cat->term_id) . '">' . $cat->name . '</a>
</span>';
} else {
return '<span class="post-cats">
<a href="' . get_category_link($cat->term_id) . '">' . $cat->name . '</a>
</span>';
}
}
add_shortcode('post_cat_hierarchy', 'manzari_category_hierarchy');This code creates a shortcode that outputs your categories in a Parent > Child format.
Step 2: Add the Shortcode to Your Page or Template
Now that the shortcode exists, you need to display it on your site.
Add the following shortcode anywhere you want the category hierarchy to appear:
[post_cat_hierarchy]If you are using Elementor, simply add a Shortcode widget and paste the shortcode there.
Step 3: Add the CSS Styling
Add the following CSS to Appearance → Customize → Additional CSS or your theme’s stylesheet.
.post-cats {
color: #ffffff;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.5px;
}
.post-cats a {
color: #ffffff !important;
text-decoration: none;
font-size: 16px;
}
.post-cats a:hover {
text-decoration: underline;
}.post-cats {
color: #ffffff;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.5px;
}
.post-cats a {
color: #ffffff !important;
text-decoration: none;
}
.post-cats a:hover {
text-decoration: underline;
}This styles the category links and ensures they match your design.
Final Result
Your categories will now display in a clean breadcrumb-style format like this:
Pets > CatsBoth categories will also be clickable, linking to their respective category archive pages.
