A Guide to Enabling Breadcrumbs in WordPress with Yoast SEO Plugin

Hello everyone, on the Ninh Binh Web blog I previously shared a post about creating breadcrumbs without using a plugin, right? Today, I’ll show you another way to add breadcrumbs to your WordPress website using the Yoast SEO plugin!

This tutorial is performed on the Flatsome theme. Therefore, during the process, some steps may differ if you are using other themes. However, in general, you just need to locate the correct .php file of the page where you want to display the breadcrumbs within your theme.

Step 1: Enable Breadcrumbs in Yoast SEO

You may have already installed the Yoast SEO plugin, or if not, you can download and install it (Free version for 1 keyword SEO – Premium for multiple keywords).

After installation, go to Dashboard > SEO > Advanced and enable Breadcrumbs (version 5.7.1).

For Yoast SEO version 7.9 and above, the Breadcrumbs settings are slightly different.

At this point, your website is ready to display breadcrumbs.

However, simply enabling it is not enough. The most important step is inserting a PHP code snippet into the correct position in your theme so it can display properly. Let’s move on to Step 2.

Step 2: Insert Breadcrumbs Code into the Theme

Now you just need to insert the following PHP code anywhere in your theme where you want the breadcrumbs to appear:

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

However, based on user navigation habits, you should only place breadcrumbs at the top of single pages (page.php) and post pages (single.php). Below is how to do it step by step in the Flatsome theme.

Adding Breadcrumbs to Pages

Flatsome pages have multiple styles (template-page). In my opinion, you should only add breadcrumbs to layouts with a left or right sidebar, as they display similarly to posts and look better. Avoid adding breadcrumbs to other layouts, especially full-width pages.

Go to File Manager in your hosting and navigate to:
wp-content > themes > flatsome > page-right-sidebar.php or page-left-sidebar.php

For example, to add breadcrumbs to a right sidebar page, open page-right-sidebar.php.

Insert the code above right after:

<div class="page-inner">

and just before:

<?php if(get_theme_mod('default_title', 0)){ ?>

Then, add the following CSS to your theme’s Custom CSS section:
Appearance > Customize > Custom CSS

.breadcrumbs {
    text-transform: uppercase;
    color: #222;
    font-weight: 700;
    letter-spacing: 0;
    padding: 0;
}
#breadcrumbs {
    margin-bottom: 10px;
    font-size: 14px;
    color: gray;
    text-transform: none;
}
.breadcrumbs a {
    color: #fba646;
    margin-left: 0 !important;
    font-weight: 400;
}

After inserting the code and CSS, save everything and check the result.

Adding Breadcrumbs to Posts

Adding breadcrumbs to posts is similar to pages.

Navigate to:
wp-content > themes > flatsome > template-parts > posts

Flatsome posts can use left or right sidebar layouts via:

• layout-left-sidebar.php
• layout-right-sidebar.php

You can insert the breadcrumbs code into those files.

However, Flatsome also uses a shared file called entry-header.php for the post header across both layouts. So it’s better to insert the breadcrumbs code there.

Go to:
wp-content > themes > flatsome > template-parts > posts > partials > entry-header.php

Paste the breadcrumbs code right after:

<header class="entry-header">

Then save and check the result.

Conclusion

Follow the steps above carefully. Wish you success and a great experience with your website!

Thank you for your support of the GiuseArt blog over time. If you need creative design, printing, or website development services, please contact: