Breadcrumb NavXT

Breadcrumb NavXT

WordPress plugin

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.

add_action('chap_masthead_after_header', 'Chap\\TemplateFunctions\\render_breadcrumbs');

add_action('chap_masthead_after_header', function() {
  \Chap\TemplateFunctions\render_breadcrumbs('inverted');
});

add_action('chap_render_post_title', 'Chap\\TemplateFunctions\\render_breadcrumbs', 5);
add_action('chap_render_page_title', 'Chap\\TemplateFunctions\\render_breadcrumbs', 5);

function custom_breadcrumbs() {
  \Chap\TemplateFunctions\render_breadcrumbs('inverted blue horizontal label');
  echo do_shortcode('[divider]');
}
add_action('chap_render_post_title', __NAMESPACE__ . '\\custom_breadcrumbs', 5);
add_action('chap_render_page_title', __NAMESPACE__ . '\\custom_breadcrumbs', 5);

function custom_breadcrumbs() {
  \Chap\TemplateFunctions\render_breadcrumbs('primary segment');
  echo do_shortcode('[divider hidden]');
}
add_action('chap_render_post_title', __NAMESPACE__ . '\\custom_breadcrumbs', 5);
add_action('chap_render_page_title', __NAMESPACE__ . '\\custom_breadcrumbs', 5);