Elementor
16 tutorials
How to Display WordPress Category Breadcrumbs (Parent > Child)
Written by Gerry Manzari
·
March 8, 2026
·
2 min read
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 Code
Add the following code to your functions.php file or insert it using a plugin like Code Snippets.
PHP
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:
PLAINTEXT
[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.
CSS
.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:
PLAINTEXT
Pets > Cats