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

It’s nice. isn’t it? 🙂

Important

Breadcrumbs can boost your SEO and it help the users navigate your website easily.

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 on our site but now we need to show them on the front-end. To do that you have to edit the functions.php file. Hope you are working on a child theme. If not, I strongly recommend creating 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. 

// Add breadcrumbs to pages 
add_action( 'et_before_main_content', function () { 
  if ( function_exists('yoast_breadcrumb') ) { 
    yoast_breadcrumb( '<p id="breadcrumbs">','</p>' ); 
  } 
})

STEP THREE

Great! You have just added breadcrumbs to 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).

.breadcrumbs-wrapper {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	text-align: left !important;
	background: #f7f9ff;
}

.breadcrumbs-wrapper .et_pb_row {
	padding: 0 !important;
}

.home .breadcrumbs-wrapper {
	display: none !important;
}

.woocommerce .woocommerce-breadcrumb {
	display: none !important;
}

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

That’s​ how to add breadcrumbs in Divi.  Good luck! 🙂

Leave a Reply

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

Pin It on Pinterest

Share This