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 CSS. For example, my Oxygen stylesheet contains the following:

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © James Clark
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram