Display a Bootstrap Breadcrumb Automatically

Creating Breadcrumbs with Bootstrap

A breadcrumb is a navigation scheme that indicates current page’s location to the user within a website or application. Breadcrumb navigation can greatly enhance the accessibility of the websites having a large number of pages.

Breadcrumb navigation has proven to be really useful for users. Most of the time our users don’t come to a specific post or page through our homepage. Often they find the content linked from somewhere else (another website, social networks, search results). It is our job to give users a proper navigation path, so they can look at other content on our site.

You can create static breadcrumbs layouts with Bootstrap simply using the class .breadcrumb on the unordered lists, like this:

<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li class="active">Accessories</li>
</ul>

Bootstrap breadcrumb WordPress plugin allow to :

  • Automatic arborescence indexation (Home > sub-page > sub-sub-page)
  • Custom post support
  • Use icon to the home link

This plugin is uploaded at github by SylvainMarty.

Download

Installation:

This section describes how to install the plugin and get it working.

Upload bootstrap-breadcrumb.php to the /wp-content/plugins/bootstrap-breadcrumb/ directory
Activate the plugin through the Plugins menu in WordPress
You can also directly place it inside your theme functions.php
Place the next code in your page template :

<?php   if( function_exists('bootstrap_breadcrumb') )      bootstrap_breadcrumb();  ?>

Different ways:

Custom home icon

<?php   if( function_exists('bootstrap_breadcrumb') )      bootstrap_breadcrumb('<i class="fa fa-home fa-lg"></i>');  ?>

Custom post support

<?php   if( function_exists('bootstrap_breadcrumb') )      bootstrap_breadcrumb( array( "custom_post_name_1", "custom_post_name_2" ) );  ?>

How to use into a template file

<?php if( function_exists('bootstrap_breadcrumb') ): ?>      <section class="section-breadcrumb">          <div class="container">              <?php bootstrap_breadcrumb('<i class="fa fa-home fa-lg"></i>'); ?>          </div>      </section>  <?php endif; ?>

Leave a Reply