Call Email

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.

How to add breadcrumbs to a wordpress website without a plugin using bootstrap 4 markup

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 '';

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.