Integrate Bootstrap’s breadcrumbs into Genesis Theme

I’m working on a project to make it easier to create a Genesis child theme with Bootstrap’s css and javascript. You can follow and/or get the complete code from https://github.com/jer0dh/bones-for-genesis-2-0-bootstrap

I need to change the default breadcrumb formatting found in genesis to bootstrap’s. Genesis formats the breadcrumbs using php while Bootstrap formats a list <li> </li> using css.

Here is genesis’s markup:

<div class="breadcrumb">You are here: <a href="//jhtechservices.com/">My website</a> / <a href="//jhtechservices.com/snippets/">Snippets</a> / Breadcrumbs</div>

Here is how bootstrap would want the markup:

<ol class="breadcrumb">
   You are here:
  <li><a href="//jhtechservices.com/">My website</a></li>
  <li><a href="//jhtechservices.com/snippets/">Snippets</a></li>
  <li class="active">Breadcrumbs</li>
</ol>

Looking under the hood at genesis’s code, I found two filter hooks to do this.

The first filter was easy to figure out, except for the ‘sep’ (separator) which I’ll get to in a moment. The prefix we changed the <ol> ordered list with the class breadcrumb. The suffix merely closing out the ordered list.

//Changing breadcrumbs to Bootstrap's format
add_filter('genesis_breadcrumb_args', 'bfg_breadcrumb_args');
function bfg_breadcrumb_args($args){
	//create a separator of 5 spaces.  This won't be seen in rendered HTML
	//and allows me to search inside of a crumb when code adds two crumbs together
	//such as a single post where title is also added to category
	$args['sep'] = '     ';
	$args['prefix'] = sprintf( '<ol %s>', genesis_attr( 'breadcrumb' ) );
        $args['suffix'] = '</ol>';
	return $args;
}

This next filter allows us to get each crumb and format it differently. At first I simply added the <li> tags and checked the crumb if it had the anchor tag or not. If it didn’t, then I added the class=”active” markup. I discovered that this is not a simple array with each crumb. It turns out that the depending on the page type, the last two crumbs may already be concatenated together. I needed a way to separate them so I thought I would add a separator and just search for it. The problem then is that it would still put whatever I chose to be a separator between the other crumbs as well in the final markup. I needed something that wouldn’t affect the display of my markup. That’s when it hit me that multiple spaces render as a single space in the display so adding a separator of 5 spaces gave me something I could search for in php but not affect the display.

add_filter('genesis_build_crumbs', 'bfg_build_crumbs',10,2 );
function bfg_build_crumbs($crumbs){

	foreach($crumbs as &$crumb){
		//Finds a double crumb and replaced separator with <li> tags
		$crumb = str_replace('     ','</li><li class="active">', $crumb);
        //If no anchor tag, then end of breadcrumb so add class of active
		$class = strpos($crumb, '</a>') ? '' : 'class="active"';
		$crumb = '<li ' . $class .'>' . $crumb . '</li>';
	}
	return $crumbs;
}

So with these two filter hooks we are able to change Genesis’s markup of breadcrumbs to the markup Bootstrap would expect.