How to add breadcrumb to Elegant Themes Divi

Ash Elegant Themes Divi, Wordpress

Divi and Breadcrumb plugins

Divi has no build-in breadcrumb function.
But you can use free plugins to add breadcrumb.

There are two popular plugins that has ability to add breadcrumb.

WordPress SEO by Yoast
This is comprehensive SEO plugin that includes breadcrumb function.

Breadcrumb NavXT
This is simple breadcrumb plugin.

How to add breadcrumb

Now, I’ll show you how to integrate these breadcrumb to Divi.
After activating plugin, go Appearance -> Edit on the sidebar.
Then add codes below.

WordPress SEO by Yoast

Add this code to bottom of header.php

<?php if(function_exists('yoast_breadcrumb') && !is_front_page()) {
 echo '<div class="container">';
 yoast_breadcrumb('<p id="breadcrumbs">','</p>');
 echo '</div>';
} ?>

Add this code to bottom of style.css

#breadcrumbs{ float: left; width: 75%; margin-bottom: 1em; position:relative; z-index:1; }
@media screen and (max-width: 980px){
 #breadcrumbs{ width: 100%; }
}

Breadcrumb NavXT

Add this code to bottom of header.php

<?php if(function_exists('bcn_display') && !is_front_page()) {
 echo '<div class="container">';
 echo '<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">';
 bcn_display();
 echo '</div>';
 echo '</div>';
} ?>

Add this code to bottom of style.css

.breadcrumbs{ float: left; width: 75%; margin-bottom: 1em; position:relative; z-index:1; }
@media screen and (max-width: 980px){
 .breadcrumbs{ width: 100%; }
}

45 thoughts on “How to add breadcrumb to Elegant Themes Divi”

  1. Nice post but i have a objection on using plugin for breadcrumb. If we use more plugins on the website it will affect the site speed, instead of using plugins we can find manual solutions to fix the needs.

    You can add below script in function.php
    ——

    function the_breadcrumb() {
    $showOnHome = 0; // 1 – show breadcrumbs on the homepage, 0 – don’t show
    $delimiter = ‘ / ‘; // delimiter between crumbs
    $home = ‘Home’; // text for the ‘Home’ link
    $showCurrent = 1; // 1 – show current post/page title in breadcrumbs, 0 – don’t show
    $before = ”; // tag before the current crumb
    $after = ”; // tag after the current crumb
    global $post;
    $homeLink = get_bloginfo(‘url’);

    if (is_home() || is_front_page()) {

    if ($showOnHome == 1) echo ‘‘ . $home . ‘‘;

    } else {

    echo ‘‘ . $home . ‘ ‘ . $delimiter . ‘ ‘;

    if ( is_category() ) {
    global $wp_query;
    $cat_obj = $wp_query->get_queried_object();
    $thisCat = $cat_obj->term_id;
    $thisCat = get_category($thisCat);
    $parentCat = get_category($thisCat->parent);
    if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ‘ ‘ . $delimiter . ‘ ‘));
    echo $before . ” . single_cat_title(”, false) . ” . $after;

    } elseif ( is_search() ) {
    echo $before . ‘Search results for “‘ . get_search_query() . ‘”‘ . $after;

    } elseif ( is_day() ) {
    echo ‘‘ . get_the_time(‘Y’) . ‘ ‘ . $delimiter . ‘ ‘;
    echo ‘‘ . get_the_time(‘F’) . ‘ ‘ . $delimiter . ‘ ‘;
    echo $before . get_the_time(‘d’) . $after;

    } elseif ( is_month() ) {
    echo ‘‘ . get_the_time(‘Y’) . ‘ ‘ . $delimiter . ‘ ‘;
    echo $before . get_the_time(‘F’) . $after;

    } elseif ( is_year() ) {
    echo $before . get_the_time(‘Y’) . $after;

    } elseif ( is_single() && !is_attachment() ) {
    if ( get_post_type() != ‘post’ ) {
    $post_type = get_post_type_object(get_post_type());
    $slug = $post_type->rewrite;
    echo ‘‘ . $post_type->labels->singular_name . ‘ ‘ . $delimiter . ‘ ‘;
    if ($showCurrent == 1) echo $before . get_the_title() . $after;
    } else {
    $cat = get_the_category(); $cat = $cat[0];
    $cats = get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘ ‘);
    if ($showCurrent == 0) $cats = preg_replace(“/^(.+)\s$delimiter\s$/”, “$1”, $cats);
    echo $cats;
    if ($showCurrent == 1) echo $before . get_the_title() . $after;
    }

    } elseif ( !is_single() && !is_page() && get_post_type() != ‘post’ && !is_404() ) {
    $post_type = get_post_type_object(get_post_type());
    echo $before . $post_type->labels->singular_name . $after;

    } elseif ( is_attachment() ) {
    $parent = get_post($post->post_parent);
    $cat = get_the_category($parent->ID); $cat = $cat[0];
    echo get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘ ‘);
    echo ‘‘ . $parent->post_title . ‘ ‘ . $delimiter . ‘ ‘;
    if ($showCurrent == 1) echo $before . get_the_title() . $after;

    } elseif ( is_page() && !$post->post_parent ) {
    if ($showCurrent == 1) echo $before . get_the_title() . $after;

    } elseif ( is_page() && $post->post_parent ) {
    $parent_id = $post->post_parent;
    $breadcrumbs = array();
    while ($parent_id) {
    $page = get_page($parent_id);
    $breadcrumbs[] = ‘ID) . ‘”>’ . get_the_title($page->ID) . ‘‘;
    $parent_id = $page->post_parent;
    }
    $breadcrumbs = array_reverse($breadcrumbs);
    foreach ($breadcrumbs as $crumb) echo $crumb . ‘ ‘ . $delimiter . ‘ ‘;
    if ($showCurrent == 1) echo $before . get_the_title() . $after;

    } elseif ( is_tag() ) {
    echo $before . ” . single_tag_title(”, false) . ” . $after;

    } elseif ( is_author() ) {
    global $author;
    $userdata = get_userdata($author);
    echo $before . ” . $userdata->display_name . $after;

    } elseif ( is_404() ) {
    echo $before . ‘Error 404’ . $after;
    }

    if ( get_query_var(‘paged’) ) {
    if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘ (‘;
    echo __(‘Page’) . ‘ ‘ . get_query_var(‘paged’);
    if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘)’;
    }

    echo ”;

    }
    };

    Then add this in your header file.

    This is enough. Thanks

    Like

    Reply

    • You said: Then add this in your header file.This is enough. Thanks

      But what do I add to my header file? I Added yor transcript to the functions.php. But what is next..?

      Like

      Reply

      • Yeah, and I wouldn’t bother anyway since it doesn’t work. Something is wrong with the code he pasted in there and it just breaks the WP site as soon as you paste it into your functions.php file.

        Paste in code: pages don’t load and you get an error.
        Delete code: page loads again no problem.

        Like

  3. Great post. I just followed the directions and successfully implemented breadcrumbs. Thanks!

    However, my home page is showing up twice in my breadcrumbs Home » Home » Elk Hunting Outfitters

    I’m a newbie, so it may be something I have done. Suggestions?

    Like

    Reply

  4. Hey Ash – used your snippet and it worked fine for about 24 – 48hrs and then suddenly stopped working? Everything checks out in yoast panel and now I can’t even seem to make Yoasts default crumbs setup work either – I’m using Divi 2.5

    Like

    Reply

      • As far as I can tell… it looked great over the weekend and was gone on Monday

        I even tried replacing yours w/ their standard code [<?php if ( function_exists('yoast_breadcrumb') )
        {yoast_breadcrumb('’,”);} ?>]

        even that worked a couple of days ago – (looked horrible w/ out any prefix or CSS) now neither work.

        I’ve reached out to Divi on the matter too but not sure – any assistance is appreciated.

        Like

      • You gotta try to disable any plugin other than Yoast/NavXT once.
        Plugin conflict tricks you often.

        Mine works without problem means you have something I don’t have.

        BTW did you check html source see if there is the breadcrumb code?

        Like

      • Are you using a child theme? The header.php file might have been overwritten in an update since you made the change. That would wipe the code you added. (and yes – you will have to do this every update of the parent theme – copy the new header.php into the child directory, paste the breadcrumb code etc – not ideal. Divi should just come with breadcrumbs)

        Liked by 1 person

    • If it’s Divi Builder’s full-width header module, little difficult.
      Because Divi Builder part is shown in content area but header and there is no fixed structure.

      Easy way is make full-width header using a plugin such as sliders and insert its shortcode above the breadcrumb.

      Like

      Reply

    • You could try putting the php code into a “Code” module under the header. Haven’t tried it myself, but the code module is how I insert iframes etc and it works for those.
      You would need to do this for every page with the custom header though 😦

      Like

      Reply

  7. Is it possible to make the breadcrumbs follow as the user scrolls on the page instead of being fixed on the page? Just like the menu follows the user as they scroll (probably not the right verbiage). Also I have been searching for a way to remove the breadcrumbs on the static homepage but keep the breadcrumbs on all the other pages but have not found a clear answer for divi theme users.

    Thanks

    Like

    Reply

    • You can put breadcrumb inside “<header>”
      for example, right before </header> <!– #main-header –>

      if you want to show it outside of header, negative margin-bottom would work.

      Like

      Reply

  8. Tried it with Yoast and it works. Thanks!

    The CSS didn’t make any difference to the appearance. BUT assigning it the “container” class like the other header elements pulled it into the right alignment.

    So new code reads:
    <?php if(function_exists('yoast_breadcrumb') && !is_front_page()) {
    echo '’;
    yoast_breadcrumb(”,”);
    echo ”;
    } ?>

    Like

    Reply

    • HTML is getting cut out of these comments…

      I’ll try this:
      <!–comment
      <?php if(function_exists('yoast_breadcrumb') && !is_front_page()) {
      echo '’;
      yoast_breadcrumb(”,”);
      echo ”;
      } ?>
      –>

      Like

      Reply

      • Still didn’t want to publish the code 😦

        anyway – just put class=”container” after id=”breadcrumbs”


        <?php if(function_exists('yoast_breadcrumb') && !is_front_page()) {
        echo '';
        yoast_breadcrumb('','');
        echo '';
        } ?>

        Liked by 1 person

  10. Hey Ash, thanks for these tutorials! I just got the Responsive Menu with Divi working in under 15 minutes and credited you in my review for the plugin over at WordPress.

    Now, I’m looking to add Breadcrumb nav on ONLY the Project pages of my Divi install and I’m just curious if there’s an easy way to do this. I don’t see it mentioned in the above tutorial and it seems like putting it in header.php will output breadcrumbs on every page. You think maybe I should just paste it in the single-project.php file instead?

    Like

    Reply

    • I figured it out… basically had to use the Insert PHP plugin and then change the code slightly. So, I put the following code into a Fullwidth Code module in the Divi Builder:

      [insert_php] echo ”;
      yoast_breadcrumb(”,”);
      echo ”;
      } [/insert_php]

      It worked, but I really hated the Yoast plugin. Very intrusive and cumbersome. I know it’s a big one that everyone loves, but I hated it, so I deleted it. It looks extremely complicated with far too many options and it’s going to crap up the view of every page in Edit mode. Once I got the breadcrumbs in there, I didn’t really like them, anyway, for Projects pages because it gives a link to Projects which is then an awful blogroll of your projects. I’d rather create a fake breadcrumb that spits out the title and has a ‘Portfolio’ link in front of it that takes the viewer to a specified portfolio page.

      Still, cool to know how to do and I thought I’d share the solution for people who want to insert breadcrumbs on specific Divi Builder Page Layouts.

      Like

      Reply

  11. Oh wow, thanks! I came back 14 days later, but I’m glad I came back! Maybe I will put it back now and live with the Yoast clutter. I should probably figure out the Yoast plugin someday, anyway.

    Like

    Reply

    • That’s also fine.
      But that method only works with single post so in order to show breadcrumb everywhere, many template should be modified which is kinda pain.

      My method works with any page but home page 🙂
      (I intentionally excluded home page)

      Like

      Reply

  14. When i use the codes for Breadcrumb NavXT my website goes really crazy.

    I am using child theme and I dont have a header.php, so created a header.php file, but as long as that is there, the whole website looks very bad. Is there some content I need to add to the child themes header.php other than the code above?

    Like

    Reply

    • What’s “banner”?
      Divi does not have banner related function or element.
      Please elaborate.

      What area?
      Header, Content, Sidebar or Footer?

      What is it?
      How did you put that banner?
      What kind of element? Widget or Divi Builder Element?

      Like

      Reply

  16. I have a similar problem to Hitesh. I’ve added the Yoast plugin and I’ve created a shortcode to add the breadcrumbs on pages as I need them (I don’t need on all pages). The shortcode contains the code you say to put in the header i.e.:
    add_shortcode(‘my_breadcrumb’, ‘my_breadcrumb_handler’);

    function my_breadcrumb_handler(){

    if ( function_exists(‘yoast_breadcrumb’) ) {
    yoast_breadcrumb(”,”);
    }
    }

    I’ve then added the shortcode [my_breadcrumb] into a Divi Code module, which is placed below some other modules making up my header banner for the page. However, the breadcrumbs always appear at the top of the page rather than where I want it to appear based on the position of the code module.

    Can you help? What am I missing?

    Thanks
    Raj

    Like

    Reply

Leave a comment