How to add Yoast breadcrumbs to the Twenty Sixteen 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 and then Advanced. 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 will need to grab the single.php file to add the code for the breadcrumb.

Because the child theme doesn’t have a copy of the 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 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 single.php file in its folder, it will use that instead of the parent theme’s copy.

Once I did that I deleted the 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 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’s always seemed overly redundant to me. The title of the post appears under the breadcrumb, why also include it in the breadcrumb too?

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.