Add WP Breadcrumbs with Bootstrap mark up
Breadcrumbs are a type of navigation that appears on news and blog feeds to help visitors navigate a website. They can be though of as a ‘you are here’ marker and are one of the ingredients of SEO.
Why does your website need Breadcumbs?
Breadcrumbs show a web pages hierarchy as a list at the top of bottom of a page. They frequently appear on websites that have a news or blog feed. They are great way to help visitors navigate between posts and categories.
There are plugins for WordPress that can help you with this, and the excellent Yoast SEO Plugin has breadcrumbs build in. However, you may want to keep your website as cleanly coded as possible and avoid the slow load times that can come with have too many plugins on your WP site. In which case, this code will help you. Your theme must be based on Bootstrap 4, or have Bootstrap CSS loading, though if you theme isn’t Bootstrap base, I don’t know why you would want to do this.
The Boostrap Breadcrumbs Code
Here is the code to add breadcrumb navigation to your WordPress website using Boostrap 4 mark up. Add this code to your functions.php file
// Breadcrumbs
function custom_breadcrumbs() {
// Settings
$separator = '>';
$breadcrums_id = 'breadcrumbs';
$breadcrums_class = 'breadcrumbs';
$home_title = 'Homepage';
// If you have any custom post types with custom taxonomies, put the taxonomy name below (e.g. product_cat)
$custom_taxonomy = 'product_cat';
// Get the query & post information
global $post,$wp_query;
// Do not display on the homepage
if ( !is_front_page() ) {
// Build the breadcrums
echo '';
// Home page
echo '- ' . $home_title . '
';
echo '- ' . $separator . '
';
if ( is_archive() && !is_tax() && !is_category() && !is_tag() ) {
echo '- ' . post_type_archive_title($prefix, false) . '
';
} else if ( is_archive() && is_tax() && !is_category() && !is_tag() ) {
// If post is a custom post type
$post_type = get_post_type();
// If it is a custom post type display name and link
if($post_type != 'post') {
$post_type_object = get_post_type_object($post_type);
$post_type_archive = get_post_type_archive_link($post_type);
echo '';
echo '- ' . $separator . '
';
}
$custom_tax_name = get_queried_object()->name;
echo '';
} else if ( is_single() ) {
// If post is a custom post type
$post_type = get_post_type();
// If it is a custom post type display name and link
if($post_type != 'post') {
$post_type_object = get_post_type_object($post_type);
$post_type_archive = get_post_type_archive_link($post_type);
echo '';
echo '- ' . $separator . '
';
}
// Get post category info
$category = get_the_category();
if(!empty($category)) {
// Get last category post is in
$last_category = end(array_values($category));
// Get parent any categories and create array
$get_cat_parents = rtrim(get_category_parents($last_category->term_id, true, ','),',');
$cat_parents = explode(',',$get_cat_parents);
// Loop through parent categories and store in variable $cat_display
$cat_display = '';
foreach($cat_parents as $parents) {
$cat_display .= '- '.$parents.'
';
$cat_display .= '- ' . $separator . '
';
}
}
// If it's a custom post type within a custom taxonomy
$taxonomy_exists = taxonomy_exists($custom_taxonomy);
if(empty($last_category) && !empty($custom_taxonomy) && $taxonomy_exists) {
$taxonomy_terms = get_the_terms( $post->ID, $custom_taxonomy );
$cat_id = $taxonomy_terms[0]->term_id;
$cat_nicename = $taxonomy_terms[0]->slug;
$cat_link = get_term_link($taxonomy_terms[0]->term_id, $custom_taxonomy);
$cat_name = $taxonomy_terms[0]->name;
}
// Check if the post is in a category
if(!empty($last_category)) {
echo $cat_display;
echo '';
// Else if post is in a custom taxonomy
} else if(!empty($cat_id)) {
echo '';
echo '- ' . $separator . '
';
echo '';
} else {
echo '';
}
} else if ( is_category() ) {
// Category page
echo '';
} else if ( is_page() ) {
// Standard page
if( $post->post_parent ){
// If child page, get parents
$anc = get_post_ancestors( $post->ID );
// Get parents in the right order
$anc = array_reverse($anc);
// Parent page loop
if ( !isset( $parents ) ) $parents = null;
foreach ( $anc as $ancestor ) {
$parents .= '';
$parents .= '- ' . $separator . '
';
}
// Display parent pages
echo $parents;
// Current page
echo '';
} else {
// Just display current page if not parents
echo '';
}
} else if ( is_tag() ) {
// Tag page
// Get tag information
$term_id = get_query_var('tag_id');
$taxonomy = 'post_tag';
$args = 'include=' . $term_id;
$terms = get_terms( $taxonomy, $args );
$get_term_id = $terms[0]->term_id;
$get_term_slug = $terms[0]->slug;
$get_term_name = $terms[0]->name;
// Display the tag name
echo '';
} elseif ( is_day() ) {
// Day archive
// Year link
echo '';
echo '- ' . $separator . '
';
// Month link
echo '';
echo '- ' . $separator . '
';
// Day display
echo '';
} else if ( is_month() ) {
// Month Archive
// Year link
echo '';
echo '- ' . $separator . '
';
// Month display
echo '';
} else if ( is_year() ) {
// Display year archive
echo '';
} else if ( is_author() ) {
// Auhor archive
// Get the author information
global $author;
$userdata = get_userdata( $author );
// Display author name
echo '';
} else if ( get_query_var('paged') ) {
// Paginated archives
echo '';
} else if ( is_search() ) {
// Search results page
echo '';
} elseif ( is_404() ) {
// 404 page
echo '- ' . 'Error 404' . '
';
}
echo '
';
}
}
Then add this bit of code where you want your breadcrumbs to appear:
<?php custom_breadcrumbs(); ?>This code was adapted from an article originally posted on The Web Taylor – you can read the original article here.