Breadcrumbs Shortcode With Schema Markup
Adds a [breadcrumbs] shortcode that prints a Home > Category > Post trail with BreadcrumbList markup, so search results can show your site structure.
Opens WPIDE on
Code
// Label of the first link.
$wpide_crumb_home = 'Home';
// Separator between items.
$wpide_crumb_separator = '/';
add_shortcode( 'breadcrumbs', function () use ( $wpide_crumb_home, $wpide_crumb_separator ) {
$items = array( array( $wpide_crumb_home, home_url( '/' ) ) );
$link = function ( $term ) {
$url = get_term_link( $term );
return is_wp_error( $url ) ? '' : $url;
};
if ( is_front_page() ) {
return '';
}
if ( is_singular() ) {
$post = get_queried_object();
if ( 'post' === $post->post_type ) {
$categories = get_the_category( $post->ID );
if ( $categories ) {
foreach ( array_reverse( get_ancestors( $categories[0]->term_id, 'category', 'taxonomy' ) ) as $ancestor ) {
$term = get_term( $ancestor, 'category' );
$items[] = array( $term->name, $link( $term ) );
}
$items[] = array( $categories[0]->name, $link( $categories[0] ) );
}
} elseif ( is_post_type_hierarchical( $post->post_type ) ) {
foreach ( array_reverse( get_post_ancestors( $post ) ) as $ancestor ) {
$items[] = array( get_the_title( $ancestor ), get_permalink( $ancestor ) );
}
} elseif ( get_post_type_archive_link( $post->post_type ) ) {
$items[] = array( get_post_type_object( $post->post_type )->labels->name, get_post_type_archive_link( $post->post_type ) );
}
$items[] = array( get_the_title( $post ), '' );
} elseif ( is_category() || is_tag() || is_tax() ) {
$term = get_queried_object();
foreach ( array_reverse( get_ancestors( $term->term_id, $term->taxonomy, 'taxonomy' ) ) as $ancestor ) {
$parent = get_term( $ancestor, $term->taxonomy );
$items[] = array( $parent->name, $link( $parent ) );
}
$items[] = array( $term->name, '' );
} elseif ( is_search() ) {
$items[] = array( sprintf( 'Search results for "%s"', get_search_query( false ) ), '' );
} elseif ( is_404() ) {
$items[] = array( 'Page not found', '' );
} elseif ( is_home() ) {
$items[] = array( single_post_title( '', false ), '' );
} else {
$items[] = array( wp_strip_all_tags( get_the_archive_title() ), '' );
}
$html = '<nav class="wpide-breadcrumbs" aria-label="Breadcrumb"><ol itemscope itemtype="https://schema.org/BreadcrumbList" style="list-style:none;margin:0 0 1em;padding:0;display:flex;flex-wrap:wrap;gap:.4em;">';
$last = count( $items ) - 1;
foreach ( $items as $position => $item ) {
$name = '<span itemprop="name">' . esc_html( $item[0] ) . '</span>';
$inner = ( $item[1] && $position !== $last ) ? '<a itemprop="item" href="' . esc_url( $item[1] ) . '">' . $name . '</a>' : $name;
$sep = $position !== $last ? ' <span aria-hidden="true">' . esc_html( $wpide_crumb_separator ) . '</span>' : '';
$html .= '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"' . ( $position === $last ? ' aria-current="page"' : '' ) . '>' . $inner . '<meta itemprop="position" content="' . ( $position + 1 ) . '" />' . $sep . '</li>';
}
return $html . '</ol></nav>';
} );
Notes
Place [breadcrumbs] in a Shortcode block in your templates or at the top of content. Change the separator and home label at the top.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.