Skip to content

Instantly share code, notes, and snippets.

@drdogbot7
Last active November 11, 2018 15:23
Show Gist options
  • Save drdogbot7/8439abbb23849f1aa221a9a4a350a9be to your computer and use it in GitHub Desktop.
Save drdogbot7/8439abbb23849f1aa221a9a4a350a9be to your computer and use it in GitHub Desktop.
Breadcrumbs NavXT Twitter Bootstrap v4 filter

Bootstrap 4 requires classes to be placed on the individual <li>'s in order for the breadcrumb styles to work. I guess this is a good thing, but it makes it harder to use Breadcrumb NavXT.

This filter will add the appropriate classes. It also adds the "active" class to the current item.

Add to functions.php

<?php
function bootstrap_bcn_li_attributes( $li_class ) { 

    // add 'breadcrumb-item' class
    $patterns[0] = '/class="/';
    $replacements[0] = '/class="breadcrumb-item ';

    // change 'current_item' to 'active'
    $patterns[1] = '/current_item/';
    $replacements[1] = 'active';

    return preg_replace( $patterns, $replacements, $li_class);
}; 

add_filter( "bcn_li_attributes", "bootstrap_bcn_li_attributes", 10, 3);
?>

Add header.php or wherever you're displaying your breadcrumbs

<ol class="breadcrumb" typeof="BreadcrumbList" vocab="http://schema.org/">
   <?php bcn_display_list(); ?>
</ol>
@robertandrews
Copy link

For me, still seems to output anchors inside spans, not list items.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment