How to easily add breadcrumbs to Divi websites

27 Oct 2018

Good morning, everyone,

In this article you will learn how to easily add breadcrumbs to your Divi website, below the page header, only using Yoast plugin (or any other plugin dedicated to breadcrumbs like Breadcrumb NavXT).

What are breadcrumbs on a website?

Breadcrumbs appear on each page of a site as a line displaying the path of the visited page, in which each depth level is a link to the corresponding page. It is usually found at the top of the page, although with long contents, you can find it at the bottom too.
Breadcrumbs on a website

What is the purpose of breadcrumbs?

As the name suggests, breadcrumbs are used to find your way around on a website. More precisely to find your way back to the home page.

It is a fundamental item in the construction of the internal linking of your site, especially for large sites.

Breadcrumbs and browsing

Breadcrumbs are a major asset for the ergonomics of a website, especially if its structure consists of several levels of imbrication.

It allows the visitor to:

  • know where he stands in the site’s folder tree;
  • understand the overall structure of the site;
  • quickly move to a parent folder of the current page (for example a product category on a e-commerce site);
  • discover a part of the site that he would never have visited otherwise.

Breadcrumbs and SEO

Breadcrumbs are a very popular tool for search engines because:

  • it improves user experience;
  • it facilitates the work of crawler robots who browse the web to index your pages.

In addition, it is a very effective way to:

  • reduce your site’s bounce rate, since the visitor has the opportunity to go up in the structure of the site in only one click;
  • transfer “link juice” from “long tail” pages to higher level pages.

It is therefore an organic, elegant and non-intrusive way to increase browsing on your site and engage user a bit more, leading PageRank to the home page.

Implementation of breadcrumbs on a Divi website

In order to add breadcrumbs to Divi, we will:

  • activate breadcrumbs on your site with the plugin of your choice (for me it is Yoast since I systematically install it on all my sites),
  • use a WordPress “hook” to automatically insert the code generating the HTML to be displayed into the header template of every (or only some) pages on the site.

Breadcrumbs activation

Example with Yoast plugin

Yoast breadcrumbs settings page

You will notice that Yoast breadcrumbs settings page offers many options, including the separator of the different hierarchy levels in the displayed path.

Retrieving the code to be inserted

If you are using Yoast, navigate to this breadcrumbs how to page and get the specified code (or wait a few seconds, as it is shown below).

For other extensions, refer to the manual 😉

Automatic code insertion

To automatically include the breadcrumbs HTML code on all pages of the site, we use the WordPress et_before_main_content hook, “action” type, provided by Divi in the header.php file.

This hook allows you to inject code just below the Divi header, before the page content, without modifying the header.php file, thus without risk for future updates of this file by Elegant Themes.

Code to add in the functions.php file of your child theme:

add_action( 'et_before_main_content', function () {
  if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb('<p id="breadcrumbs">','</p>');
  }
} );

But what about style?

So obviously, as it stands, the effect is not really beautiful, since we inject a “p” HTML element in the middle of nowhere, between page header and content. It is therefore very likely that the displayed text will stick to the left edge of your screen and to the header.

It is now your responsibility to style this paragraph with CSS to properly integrate it into your own design.

A more direct and elegant solution is to inject a whole Divi section, containing a row and a text module, in order to take advantage of the default layout style (or the one you have set in your style sheet) on desktop and mobile, including horizontal margins, to stay consistent with the rest of the site:

add_action( 'et_before_main_content', function () {
  if ( function_exists('yoast_breadcrumb') ) {
?>
<div id="section-breadcrumbs" class="et_pb_section et_pb_with_background et_section_regular">
  <div class="et_pb_row">
    <div class="et_pb_column et_pb_column_4_4 et_pb_css_mix_blend_mode_passthrough et-last-child">
      <div class="et_pb_module et_pb_text et_pb_bg_layout_light et_pb_text_align_left">
        <div class="et_pb_text_inner">
          <?php yoast_breadcrumb('<p id="breadcrumbs">','</p>'); ?>
        </div>
      </div>
    </div>
  </div>
</div>
<?php
  }
} );

Beware, for you will probably still have to make adjustments in CSS, for example to reduce the height of the inserted section; I added the “section-breadcrumbs” identifier to the section for this purpose. For example:

#section-breadcrumbs {
  padding: 20px 0 !important;
}
#section-breadcrumbs .et_pb_row {
  padding: 0 !important;
}

Note that for a “fixed” (or “sticky”) menu (which does not scroll with the page but remains stuck at the top of the window), you must add the menu height to the top padding of the section. For example, for a 160 pixels menu height:

#section-breadcrumbs {
  padding: 180px 0 20px 0 !important;
}
#section-breadcrumbs .et_pb_row {
  padding: 0 !important;
}

Page filtering

On some pages, breadcrumbs are useless, like most of the time on the home page (if the visitor is lost on your home page, you may need to rethink the design and ergonomics of your site!).

And for all sorts of reasons that don’t concern me, you can decide not to display breadcrumbs on some pages.

In this case, it is possible to filter pages using WordPress functions such as is_front_page(), is_page() or is_single().

For example, to hide breadcrumbs on home page and single posts:

add_action( 'et_before_main_content', function () {
  if ( (! is_front_page()) && (! is_single()) && function_exists('yoast_breadcrumb') ) {
?>
<div id="section-breadcrumbs" class="et_pb_section et_pb_with_background et_section_regular">
  <div class="et_pb_row">
    <div class="et_pb_column et_pb_column_4_4 et_pb_css_mix_blend_mode_passthrough et-last-child">
      <div class="et_pb_module et_pb_text et_pb_bg_layout_light et_pb_text_align_left">
        <div class="et_pb_text_inner">
          <?php yoast_breadcrumb('<p id="breadcrumbs">','</p>'); ?>
        </div>
      </div>
    </div>
  </div>
</div>
<?php
  }
} );

More options

Manual breadcrumbs

Yoast also offers the [wpseo_breadcrumb] shortcode that you can insert into any content to manually display breadcrumbs.

For example this can be useful on a site with a reduced number of pages to display breadcrumbs in a more specific place.

Depth level labels

By default, Yoast retrieves page titles to generate hierarchy level labels in breadcrumbs path string. If you want to use different labels (for example, keeping only essential keywords), you can do so via the Yoast settings on each page:
Yoast per page breadcrumbs settings

Conclusion

Breadcrumbs are an essential element for all large websites, both ergonomically and SEO wise. Don’t neglect it!

It is easy to set up, and you will please visitors while optimizing your PageRank.

Finally, even if I haven’t insisted on this aspect, I think it can be a very interesting design element!

Note that Yoast has been OK for me so far to perform this task, but that dedicated plugins offer many more additional settings and tools.