For those who might be still searching to get breadcrumbs working if no woocommerce is added to Storefront, I figured it out ( trial and error ) and here is how to do this:
– Install Yoast SEO plugin and acitvate the breadcrumbs in its settings
– Go to the Storefront parent theme folder ( wp-content/themes/storefront )
– Download the header.php file to your desktop
open this file with tool like html KIT, Notepad++ or similar
In that file search for this code:
</div>
</header><!-- #masthead -->
<?php
and put the following Yoast breadcrumb code right under it:
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('
<p id="breadcrumbs">','</p>
');
}
– save this file on your desktop
– upload it to your child themes folder ( filezilla, cPanel or similar )
– save that and close the program
– reload the page in your website and the breadcrumbs are there!
You can style things using these CSS codes ( change to your preferences )
Put these in your child themes style.css
.breadc{
font-size:14px;
width: 959px;
margin: 0 auto;
background: #FFFFFF;
border: 1px solid #F9F9F9
}
#breadcrumbs{
margin-left: 20px
margin-top: 230px
margin-bottom: 15px
}
The conplete altered code in your child theme’s header.php should look like this if all was done like the above:
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* @package storefront
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php
do_action( 'storefront_before_header' ); ?>
<header id="masthead" class="site-header" role="banner" style="<?php storefront_header_styles(); ?>">
<div class="col-full">
<?php
/**
* Functions hooked into storefront_header action
*
* @hooked storefront_skip_links - 0
* @hooked storefront_social_icons - 10
* @hooked storefront_site_branding - 20
* @hooked storefront_secondary_navigation - 30
* @hooked storefront_product_search - 40
* @hooked storefront_primary_navigation_wrapper - 42
* @hooked storefront_primary_navigation - 50
* @hooked storefront_header_cart - 60
* @hooked storefront_primary_navigation_wrapper_close - 68
*/
do_action( 'storefront_header' ); ?>
</div>
</header><!-- #masthead -->
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('
<p id="breadcrumbs">','</p>
');
}
/**
* Functions hooked in to storefront_before_content
*
* @hooked storefront_header_widget_region - 10
*/
do_action( 'storefront_before_content' ); ?>
<div id="content" class="site-content" tabindex="-1">
<div class="col-full">
<?php
/**
* Functions hooked in to storefront_content_top
*
* @hooked woocommerce_breadcrumb - 10
*/
do_action( 'storefront_content_top' );
Good luck!
Annie
