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.php

Let’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