The bigger a website is, the harder it is to find your way around. That is why breadcrumbs are such a useful functionality. They provide a simple yet effective way to navigate by showing a trail of links.
This helps you understand the website's structure and makes it much easier to access the other sections.
What are Breadcrumbs?
Breadcrumbs are simple links typically placed near a page's title. In WordPress, they usually reflect the hierarchy of the current page in relation to the website’s structure. Alternatively, they may also show the pages a visitor has visited in the order they were opened.
These links are often divided by symbols such as ">" or "/" to clearly mark each step, making it easy to navigate back to a parent page.
There are three main types of breadcrumbs:
- Hierarchy-based breadcrumbs (also called location-based):
The most common type, displaying the hierarchical structure of the website with the position of a page in the site’s structure. Example:
Home > Category > Subcategory > Page - Attribute-based breadcrumbs:
Commonly used on e-commerce websites, where visitors can filter content based on various attributes (e.g., brand, price, color). Example:
Home > Shoes > Men's > Size 10 - History-based breadcrumbs:
They are less common, show the actual path a user has taken to get to the current page. Example:
Home > Previous Page > Previous Page > Current Page
Adding and Customizing Breadcrumbs in WordPress
While WordPress does not have breadcrumbs built-in, many popular themes such as Astra, OceanWP, and Avada include them. They usually allow to enable breadcrumbs via their settings or customizer.
However, not all themes provide breadcrumbs by default, so in most cases, you will need to add them with a plugin. A plugin is often the easiest way to add breadcrumbs to a website.
Breadcrumb Plugins
Many available plugins let users personalize how breadcrumbs look and work by using filters. This might be a good option for those who are comfortable with coding and need a customized breadcrumb layout.
Yoast SEO
You may modify the breadcrumbs used by Yoast SEO by using the "wpseo_breadcrumb_links" filter. This Gist snippet offers a few ideas and examples on how to modify them using this and other filters.
Rank Math
The most useful RankMath filter for breadcrumbs is "rank_math/frontend/breadcrumb/items", allowing the modification of the breadcrumb list.
SEOPress
If you are using SEOPress, you may customize the site's breadcrumbs using the "seopress_pro_breadcrumbs_crumbs" filter.
WooCommerce
While WooCommerce is not specifically designed as an SEO plugin, it does have an option to generate breadcrumbs. The "woocommerce_get_breadcrumb" allows you to add or delete links as well as modify the text of the breadcrumb elements.
Does Permalink Manager Change The Breadcrumbs?
Upon activation, the Permalink Manager plugin does not affect the breadcrumbs. Therefore, they will stay the same by default.
To update them automatically to match the custom permalink, you need to enable the "Breadcrumbs support" setting in the "Third-party plugins" section of the plugin's settings.
Permalink Manager allows to filter breadcrumbs generated by the most popular WordPress SEO plugins. Currently, Permalink Manager supports the following plugins:
- WooCommerce
- Yoast SEO
- RankMath
- Slim SEO
- SEOPress.
Permalink Manager’s breadcrumbs feature is designed to cover most common use cases, but it has some limitations. This is because each breadcrumbs plugin works differently, and creating a universal solution is not possible.
If you are using a breadcrumbs plugin that is not on the above list, Permalink Manager will not be able to modify how the breadcrumbs trail looks.
How It Works?
With breadcrumb support enabled, the Permalink Manager adjusts the breadcrumb trail to fit your new custom permalink structure. For instance, this happens when you modify your permalinks to add or remove parent URL slugs.
To give you a better idea of how this works, let’s compare how the breadcrumbs appear before and after the permalinks are changed.
The initial URL for a page is fairly simple and consists of just the page's slug before the custom permalink is set up. You can see that neither the URL nor the breadcrumbs contain any parent slugs.
https://example.com/meet-the-team
When the parents' slugs (members/directory) are added to the custom permalink, the situation changes.
https://example.com/members/directory/meet-the-team
The function will work correctly only if the intermediate slugs are connected to any existing post, page or term.
"Members" will be included only, if https://example.com/members URL exists.
"Directory" will be included only, if https://example.com/members/directory URL exists.
As a result, links to parent pages are added to the breadcrumbs list automatically:
