How to Use Yoast SEO Breadcrumbs With A Shortcode

How to Use Yoast Breadcrumbs With A Shortcode

Yoast SEO breadcrumbs seem to be the most popular breadcrumbs for WordPress. They’re especially popular in the Beaver Builder group on Facebook. I’m writing this specifically because I’ve seen asked on multiple occasions how to use Yoast SEO breadcrumbs in Beaver Builder.

You can modify your child theme to include the breadcrumbs or if you’re a Beaver Themer user there’s a better way. Not only that but Yoast finally made this method even better because there’s no coding and no functions code necessary at all (previously there was).

Yoast SEO has a new built-in shortcode for inserting breadcrumbs anywhere you’d like. It’s really that simple.

There’s a good reason why this is a great option to use with Beaver Themer too:

You can include the breadcrumbs shortcode in any part of Beaver Themer rather than just having it output at the close of your header. Why would you want to do that? Because many pages are formatted differently and of course it makes it easier to reconfigure your site at any time with Beaver Themer.

How I Use It

So here’s my scenario:

Not all of my pages look good with the breadcrumbs immediately after the header. For instance, my Online Presence Blog main page wouldn’t look good with the breadcrumbs dividing the header from the main hero image.

I wanted the breadcrumbs below the hero image rather than after the header. That’s easy to do thanks to the shortcode and special part just for my blog page. This way I can configure any page I want in any way I want.

The Functions Code

None of this is relevant anymore since Yoast has released a shortcode of their own baked right into the Yoast SEO plugin.

Here’s the code you need to paste into your (preferably child) theme functions.php file:

// Yoast SEO Shortcode
function yoast_breadcrumb_shortcode_shortcode( $atts ) {
 extract( shortcode_atts( array(
 "before" => '<div id="breadcrumb" itemprop="breadcrumb">',
 "after" => '</div>'
 ), $atts ) );
 $wpseo_internallinks = get_option( 'wpseo_internallinks' );
 if ( class_exists( 'WPSEO_Breadcrumbs' ) && $wpseo_internallinks['breadcrumbs-enable'] == 1 ) {
 return yoast_breadcrumb( $before, $after, false );
 }
 elseif ( class_exists( 'WPSEO_Breadcrumbs' ) && $wpseo_internallinks['breadcrumbs-enable'] != 1 ) {
 return __( '<p>Please enable the breadcrumb option to use this shortcode!</p>', 'yoast-breadcrumb-shortcode' );
 }
 else {
 return __( '<p>Please install <a href="https://wordpress.org/plugins/wordpress-seo/" target="_blank">WordPress SEO by Yoast</a> plugin and enable the breadcrumb option to use this shortcode!</p>', 'yoast-breadcrumb-shortcode' );
 }
}
add_shortcode( 'yoast-breadcrumb', 'yoast_breadcrumb_shortcode_shortcode' );

Here’s the shortcode you can use anywhere in WordPress to output the breadcrumbs:

[wpseo_breadcrumb]

There’s also more information about how you can use the breadcrumbs on the Yoast website.

Enable Yoast SEO Breadcrumbs

Make sure you have the breadcrumbs enabled. I’d also recommend configuring it to look the way you want it to also.

Yoast SEO Breadcrumbs Settings

You can access the settings screen from SEO > Search Appearance > Breadcrumbs.

That’s all you need to do to setup and configure Yoast SEO breadcrumbs and use the shortcode anywhere in WordPress. It wasn’t always that easy so appreciate the simplicity of this all.

Leave a Comment