Category Missing in Breadcrumbs?
If you use a multi-category taxonomy for your posts, you might face a similar problem: WordPress does not include subcategory into the breadcrumbs at all (Picture 1). It is not a theme-specific issue but a general behaviour of WordPress. To fix this, you can use one of these two plugins which will help you include subcategory in breadcrumbs:
- Yoast SEO Plugin – you can configure the breadcrumbs in SEO – Advanced section in your WordPress menu.
- Breadcrumb NavXT – we will use this plugin in the article below.
Both of them require inserting the breadcrumbs into your theme PHP file. There are some plugins out which do not require this step, I have tried them and none of them worked properly with my configuration.
Adding Code into Your Theme's PHP File
After installing and activating the Breadcrumb navXT plugin, you need to insert these lines of code into your theme’s php file. Typically, it could be either header.php or single-header.php, header-single.php, post-header.php or similar. In my case, it is called header-single.php. Here, I inserted these lines at the end of the file:
<div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”http://schema.org/”>
<?php if(function_exists(‘bcn_display’))
{
bcn_display();
}?>After inserting, the code appeared in the top left corner above my post heading (Picture 2).
Fixing the Looks of the Breadcrumbs
As you can see from Picture 1, subcategories are displayed by default in the breadcrumbs. However, we need to fix the looks to make it similar to the original breadcrumbs that were styled by the theme. We need to change the font colour, font size, align the breadcrumbs to the centre and adjust the spaces around it to make it more compact. We achieved the desired effect by adding these lines to the style.css (you should use your child theme’s style.css file):
/*——- NavXT Breadcrumbs Styling ——- */
div.breadcrumbs {
padding-top: 20px;
font-family: Roboto;
font-size: 14px;
color: #444444;
text-align: center;
margin-bottom: -15px;
}You can edit the style.css directly from your WordPress installation by navigating to Appearance – Editor. After applying this styling and refreshing, the looks of the breadcrumbs is very similar to the original ones (Picture 3).
Renaming Home in Breadcrumbs and Removing Post Title
There are two other issues that need to be solved. The first is replacing the complete title of homepage by simple “Home”. To achieve this, go to Breacrumb NavXT settings, tab General and replace the “%htitle%” string in Home Template with “Home”.
You might also want to replace the default small arrow used as a separator by something like we have, just replace the “>” default value in Breadcrumb Separator under General tab with ” / “.
Hiding Breadcrumbs on Selected Pages
You might want to hide breadcrumbs on selected pages. This can be fixed by modifying the code we inserted into header-single.php in the first step. Replacing the code by this will ensure that breadcrumbs are hidden on homepage and two other pages (About Us and Website). Just use your aliases to designate those pages and feel free to add more of them using this syntax:
<div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”http://schema.org/”>
<?php if(function_exists(‘bcn_display’) && !is_front_page() && !is_page(‘about-us’) && !is_page(‘website’))
{
bcn_display();
}?>
</div>
Breadcrumbs for Pages and Taxonomies
You can configure many other options in Breadcrumb NavXT settings, you will surely figure it out. No more coding or styling knowledge should be needed to further adjust it.
We'd love to hear from you
If anything described in this article did not work for you or you have any other questions, add a comment to this article and we will try to help. You can also provide us with your website details and describe your issues via the enclosed contact form.
1 Comment