WordPress.org

Ready to get started?Download WordPress

Forums

WordPress SEO by Yoast
[resolved] Markup to match Twitter Bootstrap (8 posts)

  1. johnnydugs
    Member
    Posted 2 years ago #

    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">
      <li>
        <a href="#">Home</a> <span class="divider">/</span>
      </li>
      <li>
        <a href="#">Library</a> <span class="divider">/</span>
      </li>
      <li class="active">Data</li>
    </ul>

    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 ?>

    Anyone?

    thx!

    http://wordpress.org/extend/plugins/wordpress-seo/

  2. johnnydugs
    Member
    Posted 2 years ago #

    ...anyone?

  3. ivycat
    Member
    Posted 2 years ago #

    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

  4. Daniel Gilfoy
    Member
    Posted 2 years ago #

    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.

  5. ivycat
    Member
    Posted 2 years ago #

    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:

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

    Hope that helps!
    Eric

  6. johnnydugs
    Member
    Posted 2 years ago #

    absolutely fantastic and much appreciated!

    thx x10

    john

  7. johnnydugs
    Member
    Posted 2 years ago #

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

  8. ivycat
    Member
    Posted 2 years ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic