How to add Divi breadcrumbs with the Yoast SEO plugin

After the installation and activation of the Yoast SEO plugin go to SEO > Search Appearance > Breadcrumbs and click on the ‘Enabled’ toggle option.

The Yoast is enabled but in order to work we must enter manually the code inside our Divi-Child-Theme.

So, copy from the DIVI theme root the “theme-header.php” and paste it to the Divi-Child-Theme root.

Open the file and in the end, add this code (code has also a check in order to avoid breadcrumbs to be displayed on the front page. If you want to be displayed also on the front page remove this “&& !is_front_page()” ):

<!-- AWK Yoast Breadcrumbs addition -->
<div class="breadcrumbsContainer">
    <div class="container">
        <?php
            if ( function_exists('yoast_breadcrumb') && !is_front_page()) {
            yoast_breadcrumb( '<p id="innerbreadcrumbs">','</p>' );
            }
        ?>
    </div>
</div>

Beautify now with css (this was for a dark theme):

.breadcrumbsContainer {
    background: #1a1a1a;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1px;
    padding: 10px 0;
    font-weight: 300;
    color:#fff;
}
.breadcrumbsContainer span a {
    color: #949494;
}
.breadcrumbsContainer:hover span a {
    color: #fff;
}