Are you looking to edit Yoast Breadcrumbs of specific pages but feel stuck? If so, you’ve come to the right place! In this tutorial, I will show you how to edit your Yoast Breadcrumb in a few simple steps using custom filters.
This is very useful when you find the breadcrumb settings don’t meet your specific requirements.
Yoast SEO breadcrumbs are a feature in the Yoast seo plugin for WordPress websites.
Breadcrumbs are navigational aids that display a hierarchical trail of clickable links. Breadcrumbs help users understand their current website location and facilitate easy navigation. They display a series of links representing the path from the homepage to the current page.
Breadcrumbs also provide essential SEO information to Google on your page structure. If you are looking for great SEO results – add breadcrumbs to your WordPress website.
- Improved navigation: Breadcrumbs provide a clear and concise way for users to navigate your site.
- Improved SEO: Breadcrumbs help search engines understand the structure of your site. They show relationships between different pages. This can improve your site’s ranking in search results.
- Increased user engagement: Breadcrumbs help users know where they are on your site and how to get back to where they started. This can increase your user engagement.
When you build large WordPress websites you could have custom-built pages that do not show correct breadcrumb trails. They could be missing some parent pages in their path or not enough parents for the context of the page content.
In this tutorial, we are going to guide you through the process of editing your breadcrumb using the Yoast breadcrumb filter.
We will be using PHP code to do these adjustments.
Table of contents
How to Edit the Yoast Breadcrumb Trail
Make sure your theme supports the Yoast plugin and you have breadcrumbs working before you start editing. Check the default Yoast Breadcrumb Settings. It has lots of customisation settings that may mean you do not need to code a filter.
Here is a video tutorial on how to edit the Yoast Breadcrumb.
This guide will deal with two pages on the MRK WP site.
- The WordPress Care Plans page: Parent page for all our Care Plan packages and related information.
- The Support Plugins Page: Child page with the list of all WordPress plugins we support under our Care Plans.
Based on this information, the hierarchy of the pages should be as follows.
- Home page
- WordPress Care Plans page
- Care Plans Plugin Support page
- WordPress Care Plans page
Current Breadcrumb Path.
Look at the breadcrumb path. You will see that the “WordPress Care Plans” crumb is missing from the breadcrumb navigation. The breadcrumb trail starts from the Home page and goes to the final Care Plans Plugin Support page. It should have the “WordPress Care Plans” link after home and before the page reference.
Fixing this in normal yoast settings is not possible.
This is because we have a custom post type with a page as a parent. Yoast SEO default settings don’t provide this option. This means we will need to use a code snippet.
Editing the Yoast Breadcrumb Path.
We will use the Edit Yoast SEO Breadcrumb Path code snippet in the gist below. This will insert the Care Plan page in the middle of the breadcrumb navigation.
We will add this code to our theme using the functions.php file. Ideally you will be using a child theme or custom theme.
Alternatively you can use a site specific plugin or code snippet tool for your breadcrumb function.
Here is a gist of our yoast code snippet.
Explaining the code snippet.
Let’s review in detail how we customize yoast breadcrumbs using our code snippet. works and how you may implement this in your WordPress site using Yoast Breadcrumbs.
Yoast SEO breadcrumb Links filter
At the start of the code, on line 3. We will use a Yoast SEO breadcrumb filter, which will call a custom function to edit the breadcrumb.
Custom Function – ‘fix_care_plan_bc_path.’
You can give this function any name. In this tutorial, we will call it “fix_care_plan_bc_path”. When the “wpseo_breadcrumb_links” hook is fired this function will run.
On line 11, the function uses the links array(
$links) as the default parameter.
Then line 13, we declare the global post (
$post) WordPress variable.
We then go to the conditional statement on line 15 that checks for the following;
- If we are on a singular page of
'cpplugins'post type OR
- If we are on an archive page of the
‘cpplugins’ is a post-type on the MRK Website where we list all WordPress plugins we support under our Care Plans.
This “If statement” will ensure that our edits are only applied to the breadcrumbs for single and archive pages of the
'cpplugins' post type.
If we are on any other pages that do not meet that condition, the code will exit the if block statement and continue execution on line 24.
If the conditional statement on line 15 returns a
'true' value, we initialize the breadcrumb array (
In the breadcrumb array, we set the path for the parent page you want to insert in the breadcrumb trail. In this guide, we will add the URL and Text referencing the parent “Care Plans” page.
get_permalink(25105) ( Use the page ID for the parent page)
'Care Plans' (The text to display in the breadcrumb path)
After setting the values in the breadcrumb array(
$breadcrumb), we proceed to line 21, where we will edit the current links array (
array_splice function is used to change the contents of an array by either removing or adding content to an array.
In this example, we will change to the current links array (
$links) by adding the contents of the breadcrumb array(
array_splice will return a new edited links array(
$links) containing the parent page trail from the breadcrumb array(
Add code to functions.php
Copy the code snippet and paste it into your theme’s functions.php file and update it.
Edited Yoast Breadcrumb.
Return to the front page and load the page whose breadcrumb trail you have edited. You will see the new trail contains the parent page.
We have explored what breadcrumbs are and how they can be beneficial to your site visitors. We have also seen how to edit the Yoast breadcrumb using a filter. Follow us for more WordPress tips and guides.