If you, like me, are using Storefront without using WooCommerce, then you probably noticed that the breadcrumbs are not included by default.

This is because Storefront uses WooCommerce functions to print the breadcrumbs, before the content. But there’s another way to have that, with the plugin Yoast SEO.

Add the Necessary Code

Make sure to install Yoast SEO on your site. You can also write the breadcrumbs code by yourself if you want, and use that, but I think it’s just easier and faster to use the breadcrumbs included in this plugin.

Once you installed and activated Yoast SEO, add this code to your functions.php file in wp-content/themes/your-child-theme-name/ at the end of the file:

/**
* Prints the Breadcrumb in Storefront using the function by Yoast SEO.
*/
function storefront_yoast_breadcrumb() {
if ( function_exists( 'yoast_breadcrumb' ) && ! is_home() ) {
yoast_breadcrumb( '<nav class="breadcrumbs">','</nav>' );
}
}
add_action( 'storefront_content_top', 'storefront_yoast_breadcrumb' );

view raw
functions.php
hosted with ❤ by GitHub

Then, add this style in Customizer > Additional CSS or by using your preferred method to add custom CSS:

.breadcrumbs {
background-color: #f8f8f8;
margin-left: -99em;
margin-right: -99em;
margin-bottom: 4.235801032em;
padding: 1.41575em 99em;
}
.breadcrumbs a {
color: #92969e;
font-weight: initial;
}
.breadcrumbs > span > span > a:first-of-type:before {
content: "\f015";
display: inline-block;
font: normal normal normal 1em/1 FontAwesome;
-webkit-font-smoothing: antialiased;
margin-right: .5407911001em;
text-rendering: auto;
}

view raw
style.css
hosted with ❤ by GitHub

This will show the breadcrumbs on any page, except the Home page, and it will show like the one that you can see in the Storefront demo site.

Note: I chose to not show the breadcrumbs on the Home page because I don’t think it’s useful, but if for any reason you want to show it, just remove the part && ! is_home() from the PHP script to show it also on the Home.

Activate the Breadcrumbs in Yoast SEO

Once the code is ready, you need to activate the breadcrumbs in Yoast SEO, and you can do so by going to SEO > Advanced > Breadcrumbs in your Dashboard.

1 reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply