• Skip to primary navigation
  • Skip to main content
  • Skip to footer

JH Tech Services

A knowledgebase

  • Portfolio
  • Knowledgebase
  • About

Integrate Bootstrap’s breadcrumbs into Genesis Theme

May 5, 2015 by jer0dh

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:
  1. My website
  2. Snippets
  3. 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.

    • Genesis
    • Knowledgebase
    • PHP
    • Wordpress

    Footer

    • Portfolio
    • Knowledgebase
    • About

    © 2023