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:

You are here: My website / Snippets / Breadcrumbs

Here is how bootstrap would want the markup:

   You are here:
  
My website
  
Snippets
  
Breadcrumbs

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( '
', genesis_attr( 'breadcrumb' ) );
        $args['suffix'] = '
';
	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 
 tags
		$crumb = str_replace('     ','
', $crumb);
        //If no anchor tag, then end of breadcrumb so add class of active
		$class = strpos($crumb, '') ? '' : 'class="active"';
		$crumb = '
' . $crumb . '
';
	}
	return $crumbs;
}

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