How to add Yoast SEO breadcrumbs to a theme

If you are using the Yoast SEO plugin on your WordPress powered website and would like to add the breadcrumb feature to your site, the first thing you will need to do is turn the feature on. Log into WordPress and on the left-hand side, select SEO  →  Search Appearance and then select the Breadcrumbs tab. At the very top of the screen, you will see the Breadcrumb feature. Enable it.

You’ll then need to fire up your favorite FTP client and log into your website. Go to wp-content/themes and select the theme you’re using. I’m using Claire Brotherton’s excellent child theme for the default Twenty Sixteen theme. You’ll need to grab the content-single.php file from the template-parts folder to add the code for the breadcrumb.

Because the child theme doesn’t have a copy of the content-single.php file, I grabbed a copy of it from wp-content/themes/twentysixteen, the main parent theme. I moved it to my local desktop and opened it with Sublime Text. I then made the following change:

Before

After

Once I saved the change,  I uploaded it to the child theme folder. Since the child theme didn’t have a copy of the content-single.php file, it was using the file in the default Twenty Sixteen folder. That’s the way child themes work. They first try to use resources in the child theme. If the resource isn’t there, it pulls it from the parent theme. Now that the child theme has a copy of the content-single.php file in its folder, it will use that instead of the parent theme’s copy.

Once I did that I deleted the content-single.php file from my desktop. If and when I modify the file again, I’m going to grab a fresh copy using FTP. When making updates or changes, it’s better to work with a fresh copy of a file from the website, not a local archived version. That way you know it’s up-to-date and current. The copy you have on a local computer may not be as up-to-date as you think.

Once I did that, the breadcrumbs were showing at the top of every single post. I then made a change using CSS. The reason? I don’t like the post’s title to be displayed in the breadcrumb. It seems redundant to me to include the post’s title in the breadcrumb.

I added the following to the stylesheet of the child theme:


That hides the title of the post from the breadcrumb. It’s still there, you just cannot see it.

Even though I wrote this Yoast SEO breadcrumb tutorial for the Twenty Sixteen theme, it can be applied to any WordPress theme.

Leave a Reply

Your email address will not be published. Required fields are marked *