JHTechServices
Genesis PHP Chat Wordpress

Integrate Bootstrap's breadcrumbs into Genesis Theme

· 3 min read

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

    • 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

      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

    1. 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.

      2. 
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.

    ← Back to Blog