How to add the Yoast Breadcrumbs Code to XTheme by Themeco

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 Pro if you purchased it from Themeco directly.

The reason for this is that XTheme users find it a little confusing to add the code in 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.

Adding the Yoast Breadcrumbs to XTheme

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, download it. Also, make sure you’re not editing the file using the WordPress admin area. If you make a mistake by copy and paste, 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.

cPanel file manager

You’ll get the next files in the screenshot. Focus on one called public_html and click on it.

public html file

In this step, you’ll get the files of your website organized by folders.

wp content


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 suing 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 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.

child theme

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.

theme functions

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 functions.php file, add it on the bottom:

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 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 the XTheme. I use that theme as an example, and please don’t forget to check your documentation if you have other design from other companies.

Share This