Breadcrumbs Reimagined. Again.

A cartoonish wheat field with Nova, a blue alien mascot, holding a baguette. Also featured is a screenshot of the WordPress editor with the breadcrumbs block.

I feel like I’ve been writing some of the best code of my life lately. At least a few times a year, I have moments where I’m bursting with creativity. And I feel like I must work non-stop to let it all free. It’s quite addicting, taking over almost all other aspects of my life, which is not always the best thing.

But when it does happen, I get to build cool things like version 4.0 of my breadcrumbs plugin for WordPress.

With over 200 commits since v3.1.0, I’ve completely overhauled X3P0: Breadcrumbs to be the most robust breadcrumb trail solution for WordPress. And for the first time since I released the original script in 2009, “regular” users will have access to nearly every advanced setting without diving into code.

Block Updates

Version 4.0 exposes what were previously developer-only features via the WordPress block editor. There are still a few more options I’d like to include in the future, but iteration is the name of the game. Plus, I thought I’d get the new feature-set out to you all sooner rather than later.

Customize Labels

WordPress post editor showing a breadcrumbs block. In the sidebar is a panel for editing text labels.

In this version, you can customize up to three common labels:

  • Home
  • Search Results
  • 404/Page Not Found

The Home label is customizable from both the content canvas and via the inspector panel in the sidebar. This means that you can change it even while in content-only editing mode.

There are many other labels, particularly around date archives, that are not exposed in this version. Honestly, I don’t know how useful they are as block settings and whether they’ll just clutter the UI. Let me know if you’d like to see more options here.

Post Options

WordPress post editor showing a breadcrumbs block. In the sidebar are panels for selecting post rewrite tags and taxonomies.

The two major additions to the block include panels for:

  • Rewrite Tags: Lets you decide whether to show breadcrumbs based on your permalink structure’s rewrite tags (e.g., %category%, %author%, %year%, etc.).
  • Post Taxonomies: Gives you the ability to display the primary term from a particular taxonomy (e.g., category, tag, etc.) on single post views.

Both options have their usefulness, depending on what type of website you have (and they’ll even work together).

The downside is that this addition is a breaking change for some users. In version 3.0 and earlier, the block automatically output the category for posts. In version 4.0, this defaults to use rewrite tags and no category. To expose these new block options, this change was necessary. Essentially, I needed to reset to factory settings, so to speak.

It’s a bit more involved than what I’ve explained here, but trust me when I say that it was unavoidable. And I’ll do my best not to break back compat in future versions of the block.

Other Block Upgrades

A few other noteworthy additions include:

  • All the settings panels use the WordPress Tools Panel component, bringing them inline with other Core blocks.
  • A new toggle option lets you enable the link for the last breadcrumb.
  • The block now supports the Shadow design tool.

Public API Overhaul

If you didn’t know, the plugin isn’t just a block. It’s a full-featured OOP script for displaying breadcrumbs, even in classic themes. Developers can build their own implementations, extending what’s already there.

Simplified Function Call

Previous versions of the plugin didn’t have a middle ground between the easy-to-use block and working with more complex PHP objects. This version changes that with some nice syntactic sugar in the form of the new breadcrumbs() helper function.

Here’s an example of configuring a few optional parameters to output a breadcrumb trail:

use function X3P0\Breadcrumbs\breadcrumbs;

echo breadcrumbs()->render(
	breadcrumbsConfig: [
		'mapRewriteTags' => ['post' => false],
		'postTaxonomy'   => ['post' => 'category']
	],
	markupConfig: [
		'showFirstCrumb' => false,
		'linkLastCrumb'  => true
	],
	markupType: 'rdfa'
);

This is much easier than creating new objects and nesting them correctly. Of course, this is just a wrapper around a more powerful set of tools for advanced use cases.

JSON-LD Support

A nice little add-on that I wanted to point out was the addition of a built-in JSON-LD markup implementation. The plugin itself doesn’t output this in your site <head>, but it does give you the option for quickly adding it yourself.

Dropping this code snippet into a custom plugin or your theme’s functions.php will make the magic happen:

use function X3P0\Breadcrumbs\breadcrumbs;

add_action('wp_head', function() {
	echo breadcrumbs()->render(markupType: 'json-ld');
});

I decided against including an option in the plugin for automatically outputting this in version 4.0. Primarily, I didn’t want there to be any surprises for users with SEO plugins that exposed the same functionality. I need some time to let the idea simmer and decide the best path forward. What do you think?

More Developer Features Available

I won’t rehash everything that already exists in the documentation. There’s a ton of flexibility for folks who want to dive into advanced breadcrumbs configuration and extension. If you’re one of those people, feel free to review the full README.

What’s Next?

I’m hoping to go into a bit of maintenance mode as far as development goes over the holidays, but you never know when the next bout of inspiration will strike.

There’s already a request for a shortcode version of the block, which I think is worth including. I’d also like to explore adding an admin page to enable JSON-LD breadcrumbs in the site head. But feel free to open feature requests via the plugin’s GitHub repository.

Until next time, I hope y’all enjoy this release.