How to Add Subcategory to Breadcrumbs

[info_list icon_bg_color=”#ef4836″ icon_color=”#ffffff” font_size_icon=”15″][info_list_item list_title=”Adding Code into Your Theme’s PHP File” list_icon=”Defaults-chevron-right”]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).[/info_list_item][info_list_item list_title=”Fixing the Looks of the Breadcrumbs” list_icon=”Defaults-chevron-right”]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).[/info_list_item][info_list_item list_title=”Renaming Home in Breadcrumbs and Removing Post Title” list_icon=”Defaults-chevron-right”]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 “&gt;” default value in Breadcrumb Separator under General tab with ”  /  “.[/info_list_item][info_list_item list_title=”Hiding Breadcrumbs on Selected Pages” list_icon=”Defaults-chevron-right”]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>[/info_list_item][/info_list]