/ / WordPress breadcrumbs: How to show breadcrumbs in Divi
Divi Tips and Tricks

WordPress breadcrumbs: How to show breadcrumbs in Divi

WordPress breadcrumbs: How to show breadcrumbs in Divi

Do you ever want to add breadcrumbs to your Divi website? Do you know the importance of WordPress breadcrumbs and why you should have them on your website?

  1. Google always prefer breadcrumbs on websites.
  2. It is a better way to show your visitor where they are at the moment.
  3. They surely enhance the user experience.
  4. Research shows that it always tends to lower the bounce rate which is great for SEO ranking.

Important

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

Anyway, In this titorial I want show you how to add breadcrumbs in your Divi website easily. let’s dive in.

WordPress breadcrumbs: How to show breadcrumbs in Divi

Step One – Install Yoast plugin and activate WordPress breadcrumbs

Let’s start by installing the Yoast SEO plugin on your site. We are using Yoast’s inbuilt breadcrumb function here in our tutorial. Go to Plugins > Add New and search for Yoast. Once you found it click on Install and then activate it.

Yoast plugin

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

WordPress breadcrumbs: How to show breadcrumbs in Divi

Step Two – Add breadcrumbs in Divi theme

So, we have just enabled breadcrumbs on our site with Yoast but now we need to show them on the front-end of our Divi site. To do that you have to edit the functions.php file. This requires a little bit of advanced knowledge but not difficult.

Learn how to add custom css in WordPress here

Hope you are working on a child theme. If not, I strongly recommend creating a child theme and install it now before moving forward. 

Once you are done with the child theme thing, 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: Style breadcrumbs to match with your theme

Great! You have just added breadcrumbs to your Divi 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 in this type of customizations).

.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 as WooCommerce have built-in WordPress 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! 🙂

Read More: What are breadcrumbs? Why are they important for SEO?

Similar Posts

Leave a Reply

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