Using Yoast or Breadcrumb NavXT in Page Builders

I’m a huge fan of Beaver Builder, not so much a fan of Divi Builder; sometimes, when you’re building out pages in one of those (or others) you use a template that doesn’t have standard headers or footers. Though it’s not as in style as it used to be, some clients/UX designers still like having a breadcrumb at or near the top of the page.

So you reach for your favourite (or most available) plugin that builds a highly customizable breadcrumb trail, like Yoast SEO or Breadcrumb NavXT. Except all they do is slap it in the top of the page, or in the case of not using a template with no headers or footers, possibly not at all.

So the easiest way to do it: create your own shortcode.

Since both Yoast and NavXT require you to add code to your theme, we can take that code and create a shortcode that you can use anywhere you can put text. You could theoretically put it in the middle of your content, though I’m not sure why you’d do that. Anyway, on to the code!

In your functions.php file (or wherever you have custom code that gets called from functions.php), use the following:

Yoast

function my_breadcrumb() {
   if ( function_exists('yoast_breadcrumb') ) {
      return yoast_breadcrumb( '<p id="breadcrumbs">', '</p>', false);
   }
}
add_shortcode( 'my_breadcrumb', 'my_breadcrumb' );

Breadcrumb NavXT

function my_breadcrumb() {
   if(function_exists('bcn_display') && !is_front_page()) {
      $breadcrumb_output = '<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">';
      $breadcrumb_output .= bcn_display( true );
      $breadcrumb_output .= '</div>';
      return $breadcrumb_output;
   }
}
add_shortcode( 'my_breadcrumb', 'my_breadcrumb' );

Then on your page/post/custom post type, put this in a text block:

[my_breadcrumb]

Happy breadcrumbing!

(with thanks to Ash Weblog)

4 Comments

  1. Bertram Schmidt-Traub on July 5, 2017 at 6:18 pm

    Hi Matt,
    many thanks for you article. It has just saved me a lot of time!
    I’m working on a project with a WPML – Beaver Builder – Beaver Themer and I must say Themer and WPML doesn’t play very well together.



    • themattyg on July 5, 2017 at 11:49 pm

      Glad I could help! Trying to do more mini tutorials like this.



  2. Mike on July 11, 2017 at 1:27 am

    Thanks Matt! Very timely for my project. Was getting discouraged after seeing some claims on Stack Exchange that it wasn’t possible to include PHP in a shortcode function. Must have been the way the original thread was just running the bcn_display function sandwiched between the return statements. But I see how you’ve set it up to append to a variable on each line (if I’m getting it right). Very clever!



  3. Mike Xavier on November 22, 2017 at 7:57 pm

    awesome, cheers Matt!