Chap theme does not include breadcrumbs functionality built in, how ever it’s possible to add breadcrumbs with the help of a plugin specialized in SEO friendly breadcrumbs – Breadcrumb NavXT. Chap theme provides a rendering function that can be plugged into templates where needed, as well as inverted variant of the Semantic UI breadcrumbs component.
Setting up breadcrumbs
1. Setup plugin
Install and activate the Breadcrumb NavXT plugin.
2. Enable Semantic UI breadcrumbs module
In WordPress admin dashboard navigate to Chap Theme -> Chap Compiler and under Compiler settings enable the
definitions/collections/breadcrumb.less component. Hit Save changes and then Compile. This enables the styles for
.ui.breadcrumb element on the front end, which will be used for styling breadcrumbs.
3. Setup breadcrumbs separator
In WordPress admin dashboard navigate to Settings -> Breadcrumb NavXT and under General -> Breadcrumb Separator use markup compatible with Semantic UI breadcrumbs component, such as
<div class="divider"> / </div>.
Instead of separating the breadcrumbs with the
/ character you could also use an icon, such as
<div class="divider"> <i class="right chevron icon"></i> </div>.
Read more: Semantic UI Breadcrumb
The breadcrumbs can be rendered in the desired location by adding custom code to your child theme’s functions.php file. The
render_breadcrumbs function in the
Chap/TemplateFunctions namespace is built into the theme to call the plugins’ render function with correct Semantic UI wrapper element.