How can I add WPSSO breadcrumbs to my theme?

If your theme lacks a breadcrumb feature, or you wish to replace you theme's breadcrumb feature with WPSSO breadcrumbs, you can use the wpsso_breadcrumbs_html() function in your child theme header template (or any other theme template). The wpsso_breadcrumbs_html() function can be called in the loop, if you wish to add breadcrumbs to individual posts within an archive template.

Theme Header Template Code

When adding the wpsso_breadcrumbs_html() function to your theme template(s) do not forget to test for its existance so you can deactivate the WPSSO BC add-on without causing a PHP fatal error.

<?php if ( function_exists( 'wpsso_breadcrumbs_html' ) ) {

	// Wide container for 2021 theme.
	echo '<div class="header-breadcrumbs alignwide">';

	wpsso_breadcrumbs_html();

	echo '</div><!-- .header-breadcrumbs.alignwide -->';
} ?>

Breadcrumbs Output Examples

Using WP Test data, for eampe, the default wpsso_breadcrumbs_html() output for the "Tiled Gallery" post might look like this:

<div class="wpsso-bc-breadcrumbs">
    <a href="http://example.com">Home</a> > <a href="http://example.com/category/post-format-gallery/">Gallery</a>
</div>

The wpsso_breadcrumbs_html() function supports three arguments. The defaults are:

wpsso_breadcrumbs_html( $lists_max = 1, $link_sep = ' > ', $include_self = false );

The $lists_max argument allows you to add more than one line of breadcrumbs (if your post is a member of several categories, for example), the $link_sep argument allows you to change the default link separator, and $include_self allows you to optionally include the current item in the breadcrumbs.

Using wpsso_breadcrumbs_html( $lists_max = 3, $link_sep = ' | ', $include_self = true ) for the Tiled Gallery post might look like this:

<div class="wpsso-bc-breadcrumbs">
    <a href="http://example.com">Home</a> | <a href="http://example.com/category/post-format-gallery/">Gallery</a> | Tiled Gallery
</div>

<div class="wpsso-bc-breadcrumbs">
    <a href="http://example.com">Home</a> | <a href="http://example.com/category/images/">Images</a> | Tiled Gallery
</div>

<div class="wpsso-bc-breadcrumbs">
    <a href="http://example.com">Home</a> | <a href="http://example.com/category/jetpack/">Jetpack</a> | Tiled Gallery
</div>