display breadcrumb for divi theme

Breadcrumb is an SEO features that allows website visitors to navigate through a hierarchy of links and easily find out the right content as per his/her needs.

Breadcrumb also helps search engines to understand the right track of a post or page in a systematic manner.  It is also a way to gain more CTR than those pages that don’t use breadcrumb from search engines.

Divi theme is the most popular theme that does not come with inbuilt breadcrumb setting options so you need to use third party plugins to enable this feature or use a child theme that is enabled with breadcrumb.

We have recently launched “Yoast Breadcrumb Enabled Divi Child Theme” which is configured with Yoast Breadcrumb settings and you don’t need to put the breadcrumb snippet once you use this theme you just need to activate the Breadcrumb settings from Advanced settings in Yoast SEO panel.

So let’s get started to add breadcrumb feature in Divi Theme.

Yoast Breadcrumb Settings

First of all you need to enable Breadcrumb feature from Yoast SEO

To do so, navigate to Yoast > Advanced

advanced settings Yoast

Now make the changes as following image shown below

breadcrumb settings

After making changes click “Save Changes”

Manually Implementing Snippet on Theme File

Now you have to add breadcrumb generating snippet on your theme file otherwise breadcrumb won’t display

To do so, navigate to Appearance > Editor

Now choose “Single Post (single.php)

Search for following tag

<div id="left-area">

Now add the Yoast breadcrumb snippet right after this tag line

<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('
<p id="breadcrumbs">','</p>
');
}
?>

breadcrumb snippet in divi theme

Now save the file

By the same way you need to add Yoast breadcrumb snippet on Single Page (page.php), single-project.php, and other templates where you want to show breadcrumb.

You should see breadcrumb live right before title of your posts and pages.

Troubleshooting

Now you have added Breadcrumb snippet on your parent Divi Theme but your changes would be lost right after updating your parent theme, then you will need to add the snippet again to show breadcrumb.

So every time you update your parent Divi theme you will be adding the breadcrumb snippet, that is even worst.

So, to alleviate your pain we have created a Yoast breadcrumb enabled Divi Child Theme that is a blank Divi child theme and works with Divi theme and generate Yoast Breadcrumb.

So you don’t have to worry about removing breadcrumb snippet during Divi theme update, it will be remaining for ever until you use this child theme.

You can download the Yoast Breadcrumb enabled Divi Child Theme from our divi child theme showcase.

Enjoy 🙂

Pin It on Pinterest

Share This