Hi everyone, on themewpshop blog I have shared an article about creating breadcrumbs without using a plugin, right? Today, I will guide you through another way to insert Breadcrumbs for WordPress websites using the Yoast SEO plugin!

In this article, I will guide you through the steps on the Flatsome theme! Therefore, in my instructions, some steps may not be the same for other themes. However, basically, you just need to find the correct .php file of the page where you want to display Breadcrumbs in the theme!

Step 1: Open the Breadcrumbs feature in Yoast SEO

You may have installed the Yoast SEO plugin before, or if you haven’t installed it, download the plugin and install it here: Free (seo 1 keyword) – Freemium (seo many keywords).

After installation, go to Admin > SEO > Advanced and open Enable Breadcrumbs (version 5.7.1)

For Yoast SEO version 7.9 and above, the Breadcrumbs setting will be a little different as follows:

Your website is now ready to display Breadcrumbs.

However, it’s not just about pressing Enable that it will appear, but the most important thing is to insert a PHP code in the right place for it to display in the theme. Please continue with step 2:

Step 2: Insert Breadcrumbs Display Code in Theme

Now just insert the PHP code below anywhere in the theme to make it visible.

However, according to user navigation habits, we should only insert breadcrumbs at the beginning of single pages (page.php) + article pages (single.php). I will guide you through each page in the Flatsome theme!

Insert Breadcrumbs into single pages

The Flatsome theme’s single page has many different styles (template-page). Therefore, in my personal opinion, you should only insert Breadcrumbs into single pages with left sidebar or right sidebar layout, because it displays the same as in the article, so it will be more beautiful and useful. You should not insert Breadcrumbs into other page types, especially full-width.

Go to File Manager in hosting, access the folder wp-content > themes > flatsome > page-right-sidebar.php or page-left-sidebar.php.

Now I will insert Breadcrumbs into a single page with a right sidebar! Open the file page-right-sidebar.php.

Insert the code I sent above right after <div class=”page-inner”> and right above the <?php if(get_theme_mod(‘default_title’, 0)){ ?>. Please look carefully at the image above to copy and paste it correctly!

Then, copy this CSS and put it in the CSS options section of the theme! Interface – Customize – Customize CSS:

After pasting the code in the correct position and updating its CSS, save it to take effect, and here is the result.

Insert Breadcrumbs into a post

Inserting breadcrumbs into a post is almost the same as inserting it into a single page.

Go to the following folder in the File manager: wp-content > themes > flatsome > template-parts > posts.

For the Flatsome theme, posts can customize the left sidebar or right sidebar, corresponding to the 2 files layout-left-sidebar.php and layout-right-sidebar.php. You can insert the code to display Breadcrumbs into those 2 files.

However, in the Flatsome theme there is an entry-header.php file that will apply the header to both layouts above. Therefore, we will insert the code to display Breadcrumbs in this file. You need to access the following path: wp-content > themes > flatsome > template-parts > posts > partials > entry-header.php

Copy the code that displays Breadcrumbs above and insert it right after <header class=”entry-header”> as shown above! Then, save and enjoy the results:

Conclusion

Please follow the steps I have instructed in order! I wish you all the best and have an enjoyable experience at the WEBDEMO website

Thank you for your interest in following and supporting the Demo.vn blog over the past time. For all creative design – printing and website design needs, please contact Admin directly for advice and support:

+ Contact: Le Van Sang

+ Phone: 0965205202

+ Email: levansang.dna1@gmail.com

+ Website: www.themewpshop.com