April 30th, 2023

Customizing the Separator Based on Position Within Breadcrumb Trail

With Breadcrumb NavXT 7.0, updates to the internals of the plugin added support for more than a single dimension for the breadcrumb trail, allowing portions of the plugin to be cleaned up. As a consequence, non-hierarchical terms now are separated by an actual separator that is controllable. While this separator was not exposed in the settings page, Breadcrumb NavXT 7.2 introduced the bcn_display_separator filter which allows us to control the breadcrumb separator.

The combination of these two features allows new breadcrumb trails that were only possible with lists and CSS in the past. Which, while a valid method, can be a little clunky.

An Example

Suppose the site design requires changing the last separator for non-hierarchical terms (e.g. tags) from the default , to & resulting in a breadcrumb trail for an example post to look like:

Home > Blog > Tag 1, Tag 2 & Tag 3 > Awesome Post

To accomplish this, the bcn_display_separator filter can be used to dynamically replace the separator. Below is an example implementation that does just that:

add_filter('bcn_display_separator', my_bcn_separator, 10, 4);
function my_bcn_separator($separator, $position, $last_position, $depth)
{
    //On the 2nd level and lower, change the last separator to an ampersand
    if($depth > 1 && $position == $last_position - 1)
    {
        return ' &amp; ';
    }
    return $separator;
}

This code will, for any breadcrumb that is beyond the first dimension/level (indicated by $depth) set the separator to & before the final breadcrumb in that dimension/level. Using this code is straightforward, just place it in a site specific plugin (and activate the site specific plugin if it isn’t already active). Naturally, the example code can be modified to use a different separator and to target different positions within the breadcrumb trail, should that be required.

-John Havlik