Add Breadcrumbs to pages

[stefanobartoletti]

For what I can get, TSF manages breadcrumbs only for Search Engine consumption, and can't be used to generate breadcrumbs to be displayed on a site page. Other plugins should be used to achieve this, but I think that the inclusion in TSF would not be out of place.

I think that adding this ability would be useful, maybe by using a shortcode or with a similar solution.

[sybrew]

This is a lot of work, and we currently don't have the necessary frameworks ready to do front-end HTML adjustments.

With that, a lot of "bugs" need to be accounted for: like the styling, word breaking, positioning, etc.

I recommend using a dedicated breadcrumbs plugin for now. Although, I just noticed that the one that I usually recommend (Breadcrumb NavXT) ignores parameters set for the primary term. It also uses its own sorting methods; this is filterable, so I will consider adding extended support for this plugin.

We should also add support for the WooCommerce breadcrumbs in this.

[sybrew]

From Daniel's suggestion:

Add an input field that modifies the breadcrumb text.

[sybrew]

In v4.3.0, I'm planning to add an API for this by expanding support for the Schema.org script so it will work on any page output type. See #440.

It's unclear whether or not it'll become an actual shortcode, snippet, or Block. It'd be best to make a Block out of it, but Gutenberg already proposed this as a native feature.

[glorious1]

For now, is there a TSF function that can be used to get the breadcrumbs for a page to display somewhere? For instance a function like yoast_breadcrumb():

add_action( 'generate_after_header', function() {
    if ( function_exists('yoast_breadcrumb') ) {
        yoast_breadcrumb( '<div class="grid-container grid-parent"><p id="breadcrumbs">','</p></div>' );
    }
} );

[sybrew]

@glorious1 There isn't. TSF is capable only of creating a Schema.org-compatible script for breadcrumbs. This cannot be transformed into HTML.

The aim of this ticket is to make an HTML-compatible version of the script.

[touchdowntech]

Generating breadcrumbs is the missing feature in TSF that is making me choose one of the other SEO plugins like Rank Math or Slim SEO. I like TSF better than all other options but I don't like to have an additional plugin just for generating breadcrumbs. This is a big missing feature. I let my subscription expire but will return if breadcrumbs are added.

[sybrew]

Hi @touchdowntech, have you tried Breadcrumb NavXT yet?

It won't respond to TSF's primary term settings (maybe I can make that work with their new bcn_before_loop filter), but everything else should work flawlessly.

[touchdowntech]

Heh @sybrew, thanks for the response. I have used Breadcrumb NavXT in the past but was hoping to eliminate it by using an SEO plugin that includes breadcrumbs.

[sybrew]

The jack of all trades is often a master of none. Why not rely on two masters? 😄

[touchdowntech]

You convinced me. I'm back 🙂. Just renewed.

[sybrew]

In https://github.com/sybrew/the-seo-framework/commit/bf0ac1e963c74a7d9c26c225979330ad2a7fb1f1, we now have a Breadcrumb generator available (file location pending) that serves to work on every page you throw at it.

tsf()->breadcrumbs()->get_breadcrumb_list() will provide you an array with links and names. This is currently used to generate Schema.org BreadcrumList.

https://github.com/sybrew/the-seo-framework/blob/e44d72af7fc6a71c79de59600ed259a015c5e022/inc/classes/meta/factory/schema/entities/breadcrumblist.class.php#L54-L70

I'm going to use this to create a shortcode (and maybe even a block).

Since we have plans to include a block, via which, we can provide block options, we shouldn't concern ourselves with breadcrumb structural settings (e.g., should we follow terms, tags, or even post-type archives).

The same would go for the shortcode -- via attributes, we can assign all options we desire, albeit clunky:

[tsf_breadcrumbs sep=">" prefer="pta, tag, hierarchical, non-hierarchical" prefix="tag:Tag: ,"]

Yet, in the first edition, I might forgo all that and only provide a separator choice. Namely, these preferences still aren't accounted for in the generator. Though, how it's set up, we have a great candidate to use enums.

[sybrew]

You can ignore the commit above -- I added the wrong reference.

[sybrew]

Shortcode [tsf_breadcrumb] will be introduced in the following commit.

It will output breadcrumbs using WIA-ARIA's accessibility recommendation. Hence, its output will look like this:

<nav aria-label="Breadcrumb" class="tsf-breadcrumb"><ol><li class="breadcrumb-item"><a href="https://example.com/">Home</a></li><li class="breadcrumb-item"><a href="https://example.com/example-category/example-post/">Example Category</a></li><li class="breadcrumb-item"><span aria-current="page">Example Post</span></li></ol></nav><style>.tsf-breadcrumb ol{display:inline-flex;list-style:none}.tsf-breadcrumb ol li{display:inline}.tsf-breadcrumb ol li:not(:last-child)::after{content:'\203A';margin-inline-end:1ch}.tsf-breadcrumb ol li :where(a,span){margin-inline-end:1ch}</style>

Prettified:

<nav aria-label="Breadcrumb" class="tsf-breadcrumb">
	<ol>
		<li class="breadcrumb-item"><a href="https://example.com/">Home</a></li>
		<li class="breadcrumb-item"><a href="https://example.com/example-category/example-post/">Example Category</a></li>
		<li class="breadcrumb-item"><span aria-current="page">Example Post</span></li>
	</ol>
</nav>
<style>
	.tsf-breadcrumb ol {
		display: inline-flex;
		list-style: none
	}

	.tsf-breadcrumb ol li {
		display: inline
	}

	.tsf-breadcrumb ol li:not(:last-child)::after {
		content: '\203A';
		margin-inline-end: 1ch
	}

	.tsf-breadcrumb ol li :where(a, span) {
		margin-inline-end: 1ch
	}
</style>

[tsf_breadcrumb] will be equal to [tsf_breadcrumb sep="\203A" home="Home" class="tsf-breadcrumb"].

• You can filter the attributes using filter shortcode_atts_tsf_breadcrumb.
• You can filter the CSS using filter the_seo_framework_breadcrumb_shortcode_css.
• You can filter the output using filter the_seo_framework_breadcrumb_shortcode_output.

I'm on the fence about adding a Block. This is because Gutenberg already has plans to include such a block. Having two of them would be reductive. If you think a block will truly be productive, please open a new issue.