Skip to content

Accessible WordPress Breadcrumb navigation

Published by dreem-admin on May 19th, 2021

Currently supported:

  • Taxonomy
  • Single Post

In your WordPress functions.php file add the following code.

/* Taxonomy Breadcrumb */
function patter_taxonomy_breadcrumb()
{
    $show_current_if_top_level = true;
    $show_top_category_name = true;
    $show_current = true;

    $taxonomy = get_query_var('taxonomy');
    $taxonomy_details = get_taxonomy( $taxonomy );
    
    $term = get_term_by('slug', get_query_var('term'), $taxonomy);

    if ($taxonomy): ?>
    <?
    $parent = $term->parent;
    while ($parent):
        $parents[] = $parent;
        $new_parent = get_term_by('id', $parent, $taxonomy);
        $parent = $new_parent->parent;
    endwhile;
    ?>
    <nav itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="breadcrumb-nav">
        <ol>
            <? if($show_top_category_name): ?>
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                <span itemprop="title"><? echo $taxonomy_details->labels->menu_name; ?></span>
            </li>
            <? endif; ?>
            <?
            if (!empty($parents)):
                $parents = array_reverse($parents);

                // For each parent, create a breadcrumb item
                foreach ($parents as $parent):
                    $item = get_term_by('id', $parent, $taxonomy);
                    $url = get_term_link($item);
                    ?>
                    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                        <a href="<? echo $url;?>" itemprop="url">
                            <span itemprop="title"><? echo $item->name; ?></span>
                        </a>
                    </li>
                    <?
                endforeach;
            endif;
            ?>
            <? $show_top_level = $show_current_if_top_level && empty($parents); ?>
            <? if($show_top_level || $show_current && !empty($parents)): ?>
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class='breadcrumb-nav--item breadcrumb-nav--item--current'>
                <span itemprop="title"><?echo $term->name; ?></span>
            </li>
            <? endif; ?>
        </ol>
    </nav>
    <?endif;
}

Usage

<div class="container">
  <?php patter_taxonomy_breadcrumb(); ?>
</div>

Styling

CSS:

.breadcrumb-nav ol {
  padding: 0;
  list-style: none;
}
.breadcrumb-nav ol li {
  display: inline-block;
}
.breadcrumb-nav ol li + li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}