Enable Yoast Breadcrumbs

Breadcrumbs are a simple navigation tool that lay out the current path a reader has taken on your site. They make it easy to find yourself in a website’s hierarchy and come with some SEO benefits too.

The Yoast SEO plugin adds a breadcrumb feature (amongst others) and this quick guide will show you how to integrate them into your MD child theme.

To add breadcrumbs, we’re going to hook a small code snippet Yoast provides into one of MD’s hooks for easy placement. No need to override any templates, and we’ll slightly modify the code to present our breadcrumbs with a clean design.

Let’s quickly cover the steps to adding breadcrumbs to your site, with a few different placement options:

Step 1: Activate Yoast SEO + Breadcrumbs

All you need to do is install + activate the Yoast SEO plugin and then enable the breadcrumbs feature by going to SEO > Advanced > Breadcrumbs and clicking the “Enabled” switch.

After this step, head over to your child theme’s functions.php file.

Yoast SEO Breadcrumbs

Step 2: Hook Breadcrumbs into Template

The 2 separate examples below will show you how to hook in breadcrumbs full-width, after the header and to the top of the content box.

Simply paste either function (but not both) and respective hook into your functions.php file to place the embed code.

Note: to best fit the different placements, the HTML in each function is slightly different.

2a) Add Breadcrumbs After Header

Yoast SEO Breadcrumbs After Header

Notice how the breadcrumbs bar extends the full-width of the site. ↑

Paste the following into functions.php:

function md_child_theme_breadcrumbs() { ?>

	<?php if ( function_exists( 'yoast_breadcrumb' ) ) : ?>
		<div class="breadcrumbs content-item">
			<div class="inner">
				<?php yoast_breadcrumb(); ?>
			</div>
		</div>
	<?php endif; ?>

<?php }

add_action( 'md_hook_after_header', 'md_child_theme_breadcrumbs' );

2b) Add Breadcrumbs Above Content Box

Yoast SEO Breadcrumbs

Paste the following into functions.php:

function md_child_theme_breadcrumbs() { ?>

	<?php if ( function_exists( 'yoast_breadcrumb' ) ) : ?>
		<div class="breadcrumbs content-item inner">
			<?php yoast_breadcrumb(); ?>
		</div>
	<?php endif; ?>

<?php }

add_action( 'md_hook_content', 'md_child_theme_breadcrumbs' );

Step 3: Add CSS Styles

Finally, to add some extra styling to make the breadcrumbs look a little nicer, add the following CSS into your style.css file:

.breadcrumbs {
	font-size: 13px;
	padding: 13px 26px;
}

.breadcrumbs a {
	border-bottom: 2px solid #ca4141;
}

.breadcrumbs a:hover {
	border-bottom: 0;
}

@media all and (max-width: 1118px) {

	.breadcrumbs {
		text-align: center;
	}

}

Bonus: How to Choose Which Posts/Pages to Show Breadcrumbs

By using WordPress Conditional tags in our function, we can set up rules to control which posts/pages/categories/etc. the breadcrumbs show on.

For example, say I only want to display breadcrumbs on the blog homepage (is_home()) and single posts (is_single()). I can modify the if() statement in whichever function I choose above like so:

function md_child_theme_breadcrumbs() { ?>

	<?php if ( function_exists( 'yoast_breadcrumb' ) && ( is_home() || is_single() ) ) : ?>
		<div class="breadcrumbs content-item inner">
			<?php yoast_breadcrumb(); ?>
		</div>
	<?php endif; ?>

<?php }

The red highlight in the code above is where I modified the if() statement. In plain-English, that statement says:

IF Yoast breadcrumbs is installed AND is on the blog homepage OR a single post, load HTML.

You can add as many conditionals as you want to control the output. If you need help with this step, drop by the Kolakube Forums and I’ll help you out.