
Accessible WordPress Breadcrumb navigation
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";
}