How to Add Breadcrumbs in Divi Theme Website

- - Web Development

How to Add Breadcrumbs in Divi Theme Website

Divi is one of the most popular WordPress theme from Elegant Themes with lot of cool features, infact it is one of my favorite theme and so far i have developed lots of sites using this theme and specially i love its Visual Builder that Elegant Themes recently added to their Divi theme but sadly it does not support breadcrumbs functionality so today’s post is all about How to add breadcrumbs in Divi theme website?

How important Breadcrumbs are?

Well in my opinion breadcrumbs are not the must have part of any website but sometimes they are very important particularly in those websites that have lots of related links just like any Online store or shopping website where you first go to Shop page and select Category and than select product and adding product to cart, viewing the cart and checkout and etc…

in such cases breadcrumbs are important so that user can easily find out from what page he started and where he is right now. Now i am sure you know why we use breadcrumbs.

Adding Breadcrumbs in Divi Theme website

To add breadcrumbs in Divi theme you can use any of the following 2 plugins

1. Yoast SEO
2. Breadcrumb NavXT
Please Note: If you wanted to do SEO of your website as well than i will recommend using the Yoast SEO plugin but if you just need to add Breadcrumbs than i will suggest using the Breadcrumb NavXT plugin.

Yoast SEO

yoast-SEO

Yoast SEO is one of the most popular and favorite plugin for doing the SEO of a WordPress site. It has lot of amazing features in terms of providing effective SEO and this plugin is available for free but it also has premium version as well. As i already said if you are interested in the SEO of your website than you should go for this plugin as you will achieve SEO goal and Breadcrumbs as well just by utilizing one plugin.

If you have decided to add breadcrumbs by using Yoast plugin than after installing and activating this plugin add the below code at the bottom of header.php file

‘;

yoast_breadcrumb(‘

‘);

echo ‘

‘;

} ?>

Breadcrumb NavXT

BreadcrumbNavXT

Breadcrumb NavXT is also a popular plugin to add breadcrumbs and infact it is particularly developed for breadcrumbs, so go ahead and install and activate the plugin and than add the below code at the bottom of header.php

‘;
echo ‘

‘;
echo ‘

‘;
} ?>
save the file and visit the site and you will see breadcrumbs in your Divi theme site or non Divi theme site. You can use CSS to make the breadcrumb more appealing and you can also go to setting page of Breadcrumb NavXT to configure more options, from Dashboard go to Settings -> Breadcrumb NavXT.

Using Breadcrumb NavXT you might notice that on your site in breadcrumbs it is showing website title instead of Home at first place and if it is the case than you can fix this in the following two ways

add the below code in your functions.php file
add_filter(‘bcn_breadcrumb_title’, function($title, $type, $id) {
if ($type[0] === ‘home’) {
$title = get_the_title(get_option(‘page_on_front’));
}
return $title;
}, 42, 3);
OR

2. From Breadcrumb NavXT settings page jump to the Home Breadcrumb section as shown in the image below

Breadcrumb-NavXT-Settings

and replace the red highlighted with Home and you are done.

Note: if you can not see breadcrumbs by using any of the above plugins in your Divi theme site, than inspect/debug the code and check if breadcrumbs code is there because if you have sticky header than due to header fixed position breadcrumbs some times hide behind the header, this can be fixed by applying proper margin and padding.

How to Add Breadcrumbs in Divi Theme Website

How to Add Breadcrumbs in Divi Theme Website

How to Add Breadcrumbs in Divi Theme Website

How to Add Breadcrumbs in Divi Theme Website
How to Add Breadcrumbs in Divi Theme Website

How to Add Breadcrumbs in Divi Theme Website
Breadcrumbs in Divi Theme Website
maniwebify

How to Add Breadcrumbs in Divi Theme Website


Arslan Malik

Leave a Reply

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