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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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' ); |
Then, add this style in Customizer > Additional CSS or by using your preferred method to add custom CSS:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
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.
Leave a Reply