Breadcrumbs
The Breadcrumbs function generates a dynamic navigation trail based on the current page context.
It improves user navigation and supports SEO by reflecting content hierarchy.
The function supports:
-
Homepage (hidden)
-
Pages (including parent hierarchy)
-
Blog posts
-
Categories (with parent categories)
-
Archives (day, month, year)
-
Blog index page
HTML / PHP Structure
The code inside functions.php defines the theme’s custom functionality, including navigation behaviour, breadcrumbs, ACF integrations, header logic, and global helper functions used across the site.
<?php
/* Breadcrumb */
function the_breadcrumb() {
$sep = '<span class="separator"></span>';
if (!is_front_page()) {
echo '<div class="breadcrumbs alignwide">';
echo '<a href="' . get_option('home') . '" class="link--noline">Home</a>' . $sep;
if (is_category() || is_single()) {
// Display category hierarchy
if (is_single()) {
$categories = get_the_category();
if ($categories) {
$category = $categories[0];
$ancestors = get_ancestors($category->term_id, 'category');
foreach (array_reverse($ancestors) as $ancestor) {
$ancestor_category = get_category($ancestor);
echo '<a href="' . get_category_link($ancestor_category->term_id) . '">' . $ancestor_category->name . '</a>' . $sep;
}
echo '<a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a>' . $sep;
}
echo '<span>' . get_the_title() . '</span>';
} elseif (is_category()) {
$category = get_queried_object();
$ancestors = get_ancestors($category->term_id, 'category');
foreach (array_reverse($ancestors) as $ancestor) {
$ancestor_category = get_category($ancestor);
echo '<a href="' . get_category_link($ancestor_category->term_id) . '">' . $ancestor_category->name . '</a>' . $sep;
}
echo '<span>' . $category->name . '</span>';
}
} elseif (is_archive()) {
if (is_day()) {
echo '<span>' . get_the_date() . '</span>';
} elseif (is_month()) {
echo '<span>' . get_the_date(_x('F Y', 'monthly archives date format')) . '</span>';
} elseif (is_year()) {
echo '<span>' . get_the_date(_x('Y', 'yearly archives date format')) . '</span>';
} else {
echo '<span>Blog Archives</span>';
}
} elseif (is_page()) {
global $post;
if ($post->post_parent) {
$ancestors = get_post_ancestors($post->ID);
foreach (array_reverse($ancestors) as $ancestor) {
$ancestor_post = get_post($ancestor);
echo '<a href="' . get_permalink($ancestor_post->ID) . '">' . get_the_title($ancestor_post->ID) . '</a>' . $sep;
}
}
echo '<span>' . get_the_title() . '</span>';
} elseif (is_home()) {
$page_for_posts_id = get_option('page_for_posts');
if ($page_for_posts_id) {
$post = get_post($page_for_posts_id);
setup_postdata($post);
echo '<span>' . get_the_title() . '</span>';
rewind_posts();
}
}
echo '</div>';
}
}
HTML / PHP Structure
<?php
/**
* Block Template.
*
* @param array $block The block settings and attributes.
* @param string $content The block inner HTML (empty).
* @param bool $is_preview True during AJAX preview.
* @param (int|string) $post_id The post ID this block is saved to.
*/
// Block container classes.
$main_class = 'wp-block-breadcrumbs';
$classes = $main_class . ' alignfull has-lightgrey-background-color has-background has-black-color has-text-color'; ?>
<div class="<?php echo esc_attr( nucleo_block_classes( $classes, $block ) ); ?>">
<?php the_breadcrumb(); ?>
</div>
CSS / SCSS Styling
.wp-block-breadcrumbs {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
.breadcrumbs{
position: relative;
font-size: 0.875rem;
a{
text-decoration: none;
background: none;
@include link-underline();
background-image: linear-gradient(transparent calc(100% - 1px),currentColor 1px);
}
.separator{
display: inline-block;
margin: 0 1.125rem -3px;
width: 0.625rem;
height: 1rem;
background-image: url('data:image/svg+xml,<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.72266 7.65234C9.03906 8.00391 9.03906 8.53125 8.72266 8.84766L1.97266 15.5977C1.62109 15.9492 1.09375 15.9492 0.777344 15.5977C0.425781 15.2812 0.425781 14.7539 0.777344 14.4375L6.92969 8.28516L0.777344 2.09766C0.425781 1.78125 0.425781 1.25391 0.777344 0.9375C1.09375 0.585938 1.62109 0.585938 1.9375 0.9375L8.72266 7.65234Z" fill="%23BDBDBD"/></svg>');
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
}
}