Okay, breadcrumbs might seem a little old school but sometimes they play a handy role as a guide to your visitors as they browse around your site. If you decided you’d like to include them on your Divi site or any WordPress site for that matter, it’s quite a simple process if you’re happy to use the method I’m going to show you in this tutorial. In essence, all you need are two plugins, firstly, the Yoast SEO plugin and secondly, the Yoast SEO Breadcrumb Shortcode plugin by Surbma.
The Example
This is an example of breadcrumbs on a site I built a while back.
Step 1
Begin by downloading and installing the two plugins:
If you’re new to WordPress and need a little guidance installing these plugins, check out the step-by-step guide to installing a WordPress plugin.
Step 2
The next step is to head over to the enable breadcrumbs in the Yoast SEO plugin’s advanced settings window. Before you can do this, you first need to enable “Advanced settings pages”. You’ll find the switch for this under the Features tab of the Yoast SEO Dashboard.
Hit the toggle and then click on Save changes at the bottom of the page. Once the page has reloaded, select the Advanced menu option on the right-hand side of the page (under and Yoast SEO menu) and enable breadcrumbs.
In the example above, I’ve removed the separator between the breadcrumbs because, as I’ll show you later, I insert that through a little CSS.
Step 3
Now that you’ve enabled the breadcrumbs, all that’s left to do is to insert the [yoast-breadcrumb] shortcode wherever you’ed like your breadcrumb to appear. I’d recommend making the row or module global so that any changes you make to it are reflected across the site.
Styling Your Breadcrumbs
If you’d like your breadcrumbs to look like the example above, simply add the following CSS to your child theme’s stylesheet or wherever you like adding this stuff.
You might have to tinker with the CSS to get the look you’re after but I thought I’d include it here in case you needed a head start. If you want the little house icon next to the word Home (like in the example), you’ll need to install Font Awesome on your site. You can read the article How to Use Font Awesome On Your WordPress Website for detailed instructions.
Wrapping It Up
Not too hard now was it? No serious coding required just two plugins and a little bit of CSS.
Now, with all that talk of bread, wouldn’t a slice of fresh bread smothered in butter just hit the spot?
Photo by Brooke Cagle on Unsplash
Divi Notes started as a way to document my own WordPress and Divi web design/development journey and, to my delight, has grown to become a helpful resource to many other Divi users out there. If you’ve found Divi Notes to be useful in your journey, I’d appreciate it if you would consider supporting me using the form below.
