Adding a breadcrumb (crumbtrail) to an Oxygen website using Yoast SEO

14 July 2019

The most common way to add a breadcrumb to a WordPress website built in Oxygen seems to be by using the Breadcrumb NavXT - as this guide by Sridhar Katakam explains.

However it is also possible to add a breadcrumb (crumbtrail) using the Yoast SEO plugin, and it's actually pretty simple. This could be a good option if you are already using Yoast SEO and don't want to install another plugin just to handle breadcrumbs.

Here's how to do it:

Step 1

Install and activate the Yoast SEO plugin (if you haven't already). You only need the free version of the plugin, by the way, not the paid-for 'premium' version.

Step 2

In the WordPress admin area, go to SEO > Search Appearance and then click on the 'Breadcrumbs' tab

Yoast breadcrumbs

Step 3

Click 'Enabled'. Breadcrumbs are now turned on in Yoast but still need to be added to your Oxygen website

Step 4

Edit the Oxygen template that is going to contain the breadcrumb. For me, this was actually the 're-usable part' that forms my header. This re-usable part is included on the templates that apply to my posts and pages.

Step 5

Add a 'Code Block' component to the template (Add > Code Block)

Step 6

Add the following code in the 'PHP & HTML' section of the code block:

 

Save the template and that's it!

 

Bonus tip - you may have noticed in the code above that the <p> tag containing the breadcrumbs has its own id, so you can easily style it via sitewide CSS. For example, my Oxygen stylesheet contains the following:

To do this in Oxygen 2, first edit any of your Oxygen templates. Then go to Manage > Stylesheets in the menu in the top right:

Manage Stylesheets Oxygen

Add a stylesheet if you haven't done so already, click on it, then paste in your CSS in the big box on the left. Don't forget to save your changes!

Subscribe
Notify of
guest
2 Comments
Oldest
Newest
Inline Feedbacks
View all comments
waqas
waqas
1 year ago

hi i don't understand the part in bonus tip where do i add the code for the css?

James Clark
Hi! I'm James Clark and this is my website. Need help with your own website's analytics, SEO, content or ads? Contact me
Copyright © James Clark
2
0
What do you think? Leave a commentx
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram