[Plugin: WordPress SEO by Yoast] Markup to match Twitter Bootstrap

…anyone?

Hey Johnny,

I have the exact same question and will ask our developer to take a look tomorrow and see if he can find a clue. Otherwise, I think we’ll try to write ‘Yoast’ and see if he can give us a clue.

I’ll let you know what I find out.

Cheers,
Eric

One way of approaching this would be do follow these steps:

1. In the WP dashboard, go to the SEO plugin’s menu item “Internal Links”
2. Set “Separator between breadcrumbs:” to | (or whatever you like, it will be replaced)
3. Change the yoast_breadcrumb function call to:

<?php if ( function_exists('yoast_breadcrumb') ) {
            $breadcrumbs = yoast_breadcrumb( '<ul class="breadCrumbs"><li>', '</li></ul>', false );
            echo str_replace( '|', '</li><li>', $breadcrumbs );
        } ?>

4. Enjoy.

There might be a more elegant solution, but this works.

Note: If you change the pipe- | as the separator, make sure to change it in the str_replace function as well.

Hey Johnny,

As you can see, Daniel, our developer came up with a lovely solution. I’ve tried it out in one of our sites-in-development and ended up making a few tweaks to the code so that it works flawlessly with Bootstrap.

Follow Daniel’s steps above, but in #3, try this code:

<?php if ( function_exists('yoast_breadcrumb') ) {
            $breadcrumbs = yoast_breadcrumb( '<ul class="breadcrumb"><li>', '</li></ul>', false );
            echo str_replace( '|', ' <span class="divider">/</span></li><li>', $breadcrumbs );
        } ?>

You’ll see that we’ve made the following changes:

1. changed the ul class to be ‘breadcrumb’ so it matches Bootstrap’s pre-made classes
2. Add the span with a class of “divider” for the slash

Regarding automatically putting the class “active” on the final breadcrumb, I’d probably just target this using CSS :last-child. It’s got pretty broad support among modern browsers now, although I don’t think IE8 supports it:

https://www.quirksmode.org/css/contents.html

Hope that helps!
Eric

absolutely fantastic and much appreciated!

thx x10

john

… My only quap is that it appears there is a   character after each li. Are you experiencing the same issue?

Hi Johnny,

No, I haven’t experienced that. You might make sure that the character you’re string replacing matches what you have set as the breadcrumb separator and that you haven’t included extra spaces.

Holler if you get stuck.

eric