I had a little trouble getting Yoast breadcrumbs to work properly. Most of the Yoast plugin needs no other modification to your theme. It works right out of the tin and is an excellent product. But to get Yoast breadcrumbs to work you need to do a code mod. The question is where should this code modification be done.
If you look at the top of a post on this site you’ll see a link from “Home” going to the category (in the example below the category is “WiFi Radio”) and then onto the post. As in this screen capture:
That’s a breadcrumb trail. It enables the user to easily go back to the category (WiFi Radio) or even back to Home.
To be fair it is a bit of over-kill for a simple site like this but if you imagine you have a more complex site with a category with a subcategory in it and then a subcategory under that, you can see how important it is to ensure the the user doesn’t get lost along the way.
By using the breadcrumb trail the user can easily back-up the trail to a higher level and then maybe go down another path.
To enable Yoast breadcrumbs is a two stage process and one of those stages needs some simple code modification to one of the php files. But this is the bit that caused me a mild amount of trouble.
The first stage – enabling the breadcrumbs in the Yoast SEO console in the plugin is trivial.
You click on search appearance, then breadcrumbs then enable the breadcrumbs using the toggle button. Simples!
But this will not (on its own) enable breadcrumbs. You need to do the code modification too.
I tried modifying two files before I got it to work as I wanted. First I put the code in the bottom of the header file which seemed the logical place for it to be. This worked. But unfortunately ruined the layout of the website.
The breadcrumb was placed to the left of the post and so pushed the post over. This in-turn squeezed the side menu bar off the screen so that it appeared underneath the post rather than alongside it. Sub-Optimal.
I had more success when I removed the code from header.php and added it to single.php instead (see below) near the top.
single.php is the file that actually generates the post so the post (including the breadcrumb) was already constrained to the centre of the blog. The breadcrumb did not stray out of box.
This is what I did. (Don’t do this without using a child theme.)
Copy single.php out of the main theme into your child theme. Edit that. In my main theme the virgin untouched single.php looks like this:
<?php
/**
* The template for displaying all single posts
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
*
* @package WP_Bootstrap_Starter
*/
get_header(); ?>
<section id="primary" class="content-area col-sm-12 col-lg-8">
<main id="main" class="site-main" role="main">
<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_format() );
the_post_navigation();
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>
</main><!-- #main -->
</section><!-- #primary -->
<?php
get_sidebar();
get_footer();After modifying the child theme copy to enable breadcrumbs, it looks like this:
<?php
/**
* The template for displaying all single posts
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
*
* @package WP_Bootstrap_Starter
*/
get_header(); ?>
<section id="primary" class="content-area col-sm-12 col-lg-8">
<main id="main" class="site-main" role="main">
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_format() );
the_post_navigation();
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>
</main><!-- #main -->
</section><!-- #primary -->
<?php
get_sidebar();
get_footer();Notice the difference. The additional code is the bit as follows:
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>This modification works a treat. You could do some optimisation on it and remove the some of the php markup but that won’t affect how it works so why bother?
Maybe it was just me but the Yoast explanation (Here) of this felt less than their normal clear plain and excellent standard.
So there you go. Breadcrumbs enabled.