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:
Here is how bootstrap would want the markup:
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.