Breadcrumb NavXT

Breadcrumb NavXT
WordPress plugin
Breadcrumb NavXT plugin banner

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

You need to be using the child theme to add 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

4. Render the breadcrumbs

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.

Displaying breadcrumbs below masthead title
PHP
add_action('chap_masthead_after_header', 'Chap\\TemplateFunctions\\render_breadcrumbs');
Breadcrumbs below masthead title
Displaying breadcrumbs below masthead title with custom classes
PHP
add_action('chap_masthead_after_header', function() {
	\Chap\TemplateFunctions\render_breadcrumbs('inverted');
});
Inverted breadcrumbs in masthead
Displaying breadcrumbs above the title when masthead title is disabled
PHP
add_action('chap_render_post_title', 'Chap\\TemplateFunctions\\render_breadcrumbs', 5);
add_action('chap_render_page_title', 'Chap\\TemplateFunctions\\render_breadcrumbs', 5);
Breadcrumbs above page title
Displaying breadcrumbs with custom classes: label
PHP
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);
Horizontal label breadcrumbs
Displaying breadcrumbs with custom classes: segment
PHP
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);
Primary segment breadcrumbs

Leave a comment

Your email address will not be published. Required fields are marked *