The WordPress breadcrumbs feature makes it easy for both users and search engines to understand your website. No matter what layout you use, you can easily enhance your blog structure with breadcrumbs.
Even if your theme adds custom breadcrumbs, you may need to use the Yoast plugin for that. It’s simple, better, and provides better results with SERP. Today, you’ll learn how to add the Yoast breadcrumbs code to your XTheme or the Pro Theme by Themeco.
The reason for this is that XTheme users find it a little confusing to add the code to their themes. For beginners, editing a theme file is not easy, So, I’ll make things clear for all. Follow this step by step tutorial and enable the Yoast breadcrumbs for your blog in minutes.
What you need is access to your File Manager tool in cPanel or a regular FTP software like FileZilla.
Please make a backup of your themes folder before doing anything. You can do that by compressing all your themes folder and then downloading it. Also, make sure you’re not editing the file using the WordPress admin area. If you make a mistake by copying and pasting, you’ll be locked out of your site. So, use an FTP, it’s better, safer, and more secure especially with SFTP.
In your cPanel account, you’ll find a tool called File Manager, click on it.
You’ll get the next files in the screenshot. Focus on one called public_html and click on it.
In this step, you’ll get the files of your website organized by folders.
Now, you only need to open the directory called wp-content. That WordPress folder contains all your site plugins, themes and uploads. So, in this case, we need to add the breadcrumbs code to the functions.php file in your used theme.
Since you’re using XTheme from Themeco, you need to use a child theme in order to make things work better. No matter what code you add, if it’s not in the child theme, you’ll lose it in the next theme update. However, when you add the code to your child theme, your modification will still be there even with updates. That’s the main reason why you should use a child theme and not the parent theme framework.
After that, you’ll get the directory, find themes and click on it.
Now, you’ll get your themes folder, you can see the XTheme and of course, you just need the child theme. Next, open that file.
In that folder, there are files, find the one called function.php and select it. Then, click on edit or the equivalent option in your control panel.
Please note, if you use Filezilla, you’ll need to use the right-click option to edit the file. After adding the code, close the window and click on any file in your distant server. The software will ask you to upload the file automatically and save the changes. Confirm and everything will be working.
Here’s the code to add in the child theme’s funtions.php file, add it to the bottom of the file.
if (! function_exists( 'x_breadcrumbs' ) ) : function x_breadcrumbs() { if ( x_get_option('x_breadcrumb_display', 1 ) && function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<p id="breadcrumbs">','</p>'); } } endif;Now, you are supposed to have enabled the breadcrumbs navigation option in your Yoast plugin settings, come back to your site, click on any post and verify that everything is working.
I recommend deleting the WordPress cache if you can, that way, you’ll avoid getting cached pages without the modified theme file.
This tutorial applies to many WordPress themes and it’s not only dedicated to the XTheme. I use that theme as an example, and please don’t forget to check your documentation if you have other designs from other companies.
Read next:
