Breadcrumbs in ItalyStrap theme

If you are using ItalyStrap framework for your site the breadcrumbs are already loaded in all pages appended to action hook italystrap_before_loop with the function display_breadcrumbs, if you want to append the breadcrumbs in another position you have to remove the action first and then append to another action hook registered in the framework in a position you want to show it, you can read more here how can add and remove action.

Breadcrumbs in your theme

Add ItalyStrap Breadcrumbs in your theme is simple, you have to put the code below in your theme files where you want to show it, better if you can create a child theme of your theme and then put the code in the child.

Remember that creating a child theme is always a best practice.

So, this is the code that you have to add to your theme o child theme (right? ;-)):

<?php if ( class_exists( 'ItalyStrap\Core\breadcrumbs' ) ) {
    ItalyStrap\Core\breadcrumbs();
} ?>

This will show breadcrumbs like this (if you have Twitter Bootstrap css):

By default the ItalyStrap breadcrumbs is developed with Schema.org markup for Google Rich snippets and Twitter Bootstrap style, if you don’t have Twitter Bootstrap CSS the breadcrumbs will show as a list (you will have to develop your own style, remember, add separator in CSS style, read this):

  1. Blog info name
  2. Category
  3. Breadcrumbs

If you don’t want or can’t develope your own style you can copy and paste the css below in your style.css or in the file with your css:

.breadcrumb {
    padding:8px 15px;
    margin-bottom:20px;
    list-style:none;
    background-color:#f5f5f5;
    border-radius:4px
}
.breadcrumb > li {
    display:inline-block
}
.breadcrumb > li + li:before {
    content:"/0a0"; // This is the separator if you want change it.
    padding:0 5px;
    color:#ccc
}
.breadcrumb > .active {
    color:#777
}

The breadcrumbs accepts an optional array for your personal customizations with this default parameters:

$defaults = array(
 'home' => $bloginfo_name,
 'open_wrapper' => '<ol class="breadcrumb"  itemscope itemtype="http://schema.org/BreadcrumbList">',
 'closed_wrapper' => '</ol>',
 'before_element' => '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">',
 'before_element_active'    =>  '<li class="active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">',
 'after_element' => '</li>',
 'wrapper_name' => '<span itemprop="name">',
 'close_wrapper_name' => '</span>'
 );

Example to show Twitter Bootstrap Glyphicon instead of Home (if you have it):

<?php if ( class_exists('ItalyStrap\Core\breadcrumbs') ) {
	
    $defaults = array(
        'home'    =>  '<span class="glyphicon glyphicon-home" aria-hidden="true"></span>'
    );
	
    ItalyStrap\Core\breadcrumbs( $defaults );
	
}?>

It will show breadcrumbs with the icon “home” of glyphicon like this:

You can use other icon font as well.

Let see what will be print in html source (for dev)

This is the HTML markup for basic breadcrumbs:

<ol class="breadcrumb">
  <li><a href="#">Blog info name</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

And this is html markup with Schema.org:

<ol itemtype="http://schema.org/BreadcrumbList" itemscope="" class="breadcrumb">
    <li itemtype="http://schema.org/ListItem" itemscope="" itemprop="itemListElement">
        <a title="ItalyStrap" href="http://192.168.1.10/italystrap" itemprop="item">
            <span itemprop="name">Blog info name</span>
            <meta content="ItalyStrap" itemprop="name">
        </a>
        <meta content="1" itemprop="position">
    </li>
    <li itemtype="http://schema.org/ListItem" itemscope="" itemprop="itemListElement">
        <a title="Senza categoria" href="http://192.168.1.10/italystrap/category/senza-categoria" itemprop="item">
            <span itemprop="name">Senza categoria</span>
        </a>
        <meta content="2" itemprop="position">
    </li>
    <li itemtype="http://schema.org/ListItem" itemscope="" itemprop="itemListElement">
        <span itemprop="name">Breadcrumbs</span>
        <meta content="3" itemprop="position">
    </li>
</ol>

Last edit:

There are no comments yet, why not be the first

Leave a Reply

Your email address will not be published. Required fields are marked *