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

  • Resolved johnnydugs


    Hi Folks –

    Trying to figure out how to edit the markup on the breadcrumbs so that it matches the markup of Twitter’s Bootstrap framework for breadcrumbs. I can add the unordered list <ul></ul> using the prefix variable $prefix, however, I cannot figure out how to wrap the anchor links in list item elements <li></li>, as well as adding the class="active" to the last child as shown below:

    <ul class="breadcrumb">
        <a href="#">Home</a> <span class="divider">/</span>
        <a href="#">Library</a> <span class="divider">/</span>
      <li class="active">Data</li>

    What I currently have looks like this:

    <?php if (function_exists('yoast_breadcrumb')) { $breadcrumbs = yoast_breadcrumb('<nav><ul class="breadcrumb">','</ul></nav>',true); } // display breadcrumbs ?>



Viewing 7 replies - 1 through 7 (of 7 total)
  • …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.


    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:

    Hope that helps!

    absolutely fantastic and much appreciated!

    thx x10


    … My only quap is that it appears there is a &nbsp; 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.


Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Plugin: WordPress SEO by Yoast] Markup to match Twitter Bootstrap’ is closed to new replies.