WordPress Breadcrumbs
SEO-friendly breadcrumb navigation with schema markup.
SEO-optimized breadcrumb navigation with Schema.org structured data markup. Handles posts, pages, categories, archives, and search results with proper hierarchy.
breadcrumbs.phpphp
<?php
/**
* Custom Breadcrumbs with Schema.org markup
* SEO-friendly breadcrumb navigation
*/
function custom_breadcrumbs() {
// Settings
$separator = '<span class="separator">/</span>';
$home_title = 'Home';
// Get the query & post information
global $post;
// Build the breadcrumbs
echo '<nav class="breadcrumbs" aria-label="Breadcrumb">';
echo '<ol itemscope itemtype="https://schema.org/BreadcrumbList">';
// Home page
echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
echo '<a itemprop="item" href="' . home_url('/') . '">';
echo '<span itemprop="name">' . $home_title . '</span></a>';
echo '<meta itemprop="position" content="1" />';
echo '</li>';
echo $separator;
$position = 2;
if (is_category() || is_single()) {
$categories = get_the_category();
if ($categories) {
$category = $categories[0];
$cat_parents = get_category_parents($category->term_id, true, $separator);
if (!is_wp_error($cat_parents)) {
echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
echo '<span itemprop="name">' . strip_tags($cat_parents) . '</span>';
echo '<meta itemprop="position" content="' . $position . '" />';
echo '</li>';
$position++;
}
}
if (is_single()) {
echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="active">';
echo '<span itemprop="name">' . get_the_title() . '</span>';
echo '<meta itemprop="position" content="' . $position . '" />';
echo '</li>';
}
} elseif (is_page()) {
if ($post->post_parent) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="' . get_permalink($page->ID) . '">
<span itemprop="name">' . get_the_title($page->ID) . '</span></a>
<meta itemprop="position" content="' . $position . '" />
</li>';
$parent_id = $page->post_parent;
$position++;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) {
echo $crumb . $separator;
}
}
echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="active">';
echo '<span itemprop="name">' . get_the_title() . '</span>';
echo '<meta itemprop="position" content="' . $position . '" />';
echo '</li>';
} elseif (is_search()) {
echo '<li class="active">Search results for: ' . get_search_query() . '</li>';
} elseif (is_404()) {
echo '<li class="active">404 - Page not found</li>';
} elseif (is_archive()) {
echo '<li class="active">' . post_type_archive_title('', false) . '</li>';
}
echo '</ol>';
echo '</nav>';
}
/**
* Breadcrumb CSS
*/
function breadcrumb_styles() {
?>
<style>
.breadcrumbs {
padding: 16px 0;
font-size: 14px;
}
.breadcrumbs ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.breadcrumbs li {
display: inline-flex;
align-items: center;
}
.breadcrumbs a {
color: #666;
text-decoration: none;
transition: color 0.3s;
}
.breadcrumbs a:hover {
color: #000;
}
.breadcrumbs .active {
color: #000;
font-weight: 600;
}
.breadcrumbs .separator {
color: #ccc;
margin: 0 4px;
}
</style>
<?php
}
add_action('wp_head', 'breadcrumb_styles');Usage
Add to functions.php, then use <?php custom_breadcrumbs(); ?> in your template
Installation
Add to theme's functions.phpLet’s Build Something You’ll Be Proud Of
No fluff. Just thoughtful design and reliable development.
Work with me
Average response time: within 24 hours
