How to add Divi breadcrumbs with Rank Math SEO plugin

After the installation and activation of the Rank Math SEO plugin go to General Settings > Breadcrumbs tab, and then click on the ‘Enable breadcrumbs function’.

The Rank Math SEO breadcrumbs 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 Rank Math SEO Breadcrumbs addition -->
<div class="breadcrumbsContainer">
    <div class="container">
        <?php
            if ( function_exists('rank_math_the_breadcrumbs') && !is_front_page()) {
            rank_math_the_breadcrumbs( '<p id="breadcrumbs">','</p>' );
            }
        ?>
    </div>
</div>

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

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