Did you guys noted that I have used Breadcrumbs in my latest Divi child theme ‘BLOSSOM‘?

It’s nice. isn’t it? 🙂
r

Important

Breadcrumbs can boost your SEO and it help the users navigate your website easily.
Anyway, let me tell you how I added that in mine. The easiest way.

STEP ONE – Add breadcrumbs in Divi

Lets start by installing Yoast SEO plugin in your site.
https://wordpress.org/plugins/wordpress-seo/

Then go to the dashboard to enable breadcrumbs. SEO > Search Appearance > Breadcrumbs.

STEP TWO – Add breadcrumbs in Divi

So we have just enabled breadcrumbs in our site but now we need to show them on the front-end. To do that you have to adit the functions.php file. Hope you are working on a child theme. If not I strongly reccomend to create a child theme and install it now. 

Once done, go to Appearance > Theme Editor and choose the functions.php file to edit. Paste the below code at the end of the php file. 

STEP THREE

Great! You have just added breadcrumbs in your site. But it is a bit ugly at the moment. right?
let’s add some styling to make it nicer. Copy the below CSS snippet and paste in Divi Theme Option’s Custom CSS area or WP Customizer Additional CSS area or to your child theme’s style.css file. (Use any method you use to add custom css, I always prefer to use the style.css file in my child theme to keep it clean and clear).

Here in my code I have added two snippets to disable breadcrumbs in my Home page and in WooCommerce pages. (WooCommerce have built in breadcrumbs). You can do the same.
Alos you can remove the .home .breadcrumbs-wrapper{} CSS snippet if you want to show them on the home page too.

Thats​ how to add breadcrumbs in Divi.  Good luck! 🙂

Pin It on Pinterest