How To Add Breadcrumbs To Your WordPress Website

Posted on August 6, 2014 by in Tips & Tricks | 44 comments

How To Add Breadcrumbs To Your WordPress Website

You read the title right, we are going to learn about breadcrumbs. You may think of breadcrumbs, well, as literally some crumbs of bread spread out on a table. That’s kind of how they got their name in the web design world.

Websites utilize breadcrumbs as a neat utility to present the user with information on where they have navigated and how to conveniently return to a page they visited before. Breadcrumbs got their name from the children’s story Hansel and Gretel, in which a trail of breadcrumbs where used to help them find their way back home. Website breadcrumbs serve a similar function.

This post will dive into breadcrumbs, why we use them, and why you should too. Lets get started with learning how to use breadcrumbs with WordPress.

What is a breadcrumb exactly?

A breadcrumb in the web design world is a series of connected links that form information or evidence based upon where you navigate on a website.

A breadcrumb is commonly indicated by its link structure and displayed inline much like a stripped down navigation menu would be:

Home Page / Product Category Page / Single Product Page

Each link can be used to direct your users to specific pages as well as be a helpful utility in the event that a user needs to visit a previous page or find out what page they are currently on if it is unclear.

Why use breadcrumbs?

Every website doesn’t necessarily require breadcrumbs. It is more common to see them on larger eCommerce based websites like or web services like Dropbox or Box

The whole idea is to make the experience as easy and user-freiendly as possible.


Home Depot uses breadcrumbs to help the user navigate the large number of levels of the website.


Dropbox uses breadcrumbs to offer easy access to the many levels of folders it’s structure provides.

Dropbox uses breadcrumbs as well to help users identify where they are within their folder structure. Dropbox utilizes a minimal design so breadcrumbs act as a form of navigation.

Most sites who utilize breadcrumbs do so based on the content. If there is a lot of content, more often than not breadcrumbs will be a wise choice as it gives users that much more control over their experience.

If you’re concerned about SEO (Search Engine Optimization), which you should be, then breadcrumbs also help with that. Having links present helps search engines find your websites links more efficiently. A good internal linking structure makes it easier for bots to crawl your website.

How to use breadcrumbs with WordPress

Breadcrumbs can be added manually, but luckily WordPress makes the addition a breeze so you don’t have to repeat yourself. Just think of how many links you would have to add to every page of your site without the power of WordPress and its plugins. Yuck!

There are a large number of plugins available that assist with adding breadcrumbs to your WordPress website. Some are designed specifically for the use of breadcrumbs while others are a package deal and offer additional functionality.

Here’s a few you can check out.

WordPress SEO by Yoast

Don’t judge the book by its cover with this plugin. Not only does it provide you with great SEO optimization, the use of its breadcrumb functionality comes bundled as a bonus. WordPress is naturally a good platform for SEO, so by combining this plugin and WordPress you will be killing two birds with one stone!

Breadcrumb NavXT

Breadcrumb NavXT is a new plugin from the creators of Breadcrumb Navigation XT, and was built from the ground up to be an even better plugin than the original. The plugin makes it easy to generate breadcrumb links on your site. These link trails are customizable to suit the needs of just about any website owner. The plugin also has some nice functions for developers, such as the ability to add unique classes and ID’s to your breadcrumbs for custom CSS styling. The plugin also supports up to 18 languages.

Really Simple Breadcrumb

The Really Simple Breadcrumb plugin is a no nonsense solution to add quick breadcrumbs to your site. Simply install, activate the plugin, and then if you like you can style the breadcrumbs using a .breadcrumb class in your CSS stylesheet.


To setup our demo installation of our breadcrumbs I’ll be using the WordPress SEO by Yoast plugin I mentioned before. For a more detailed look at this plugin, you can check out our post about SEO plugins.

Login to your WordPress admin area and head to the plugins tab. Click Add New and search for WordPress SEO by Yoast to find the one I’ll be using.


Search for wordpress seo by yoast to find the result we want. Here you see our search results.

It should appear first in the list. Click install and make sure to Activate it before proceeding.

Once installed you’ll notice a new setting link called SEO as shown below.


Our SEO plugin installed presents an entire settings panel.

Where we want to focus our attention is the Internal Links navigational link inside the SEO section of the newly added plugin.


Click Internal Links inside of the new SEO settings menu

Go ahead and click Internal Links and you’ll be presented with this screen.


We need to enable our breadcrumb feature which comes bundled with the SEO plugin. Here you can set more customizations to your breadcrumbs. Experiment and do whatever works for your use case.

If you read through the settings you’ll first see a checkbox labeled Enable Breadcrumbs. This needs to be checked in order to get the breadcrumb functionality to work with your WordPress site.

Once enabled, we still need to add a simple line of PHP code to our theme. Breadcrumbs can live on pages, single post pages, and more. It will vary based on where you place the code on each individual website you have. I’ll focus on the single post temple within our theme.

I’m using the Divi 2.0 theme from our Elegant Themes library. Inside the theme I’ll open the single.php file to target each individual post on our website like you see below.


single.php file inside our Divi 2.0 Theme.

We want to add the code supplied to us by the directions on Yoast’s website or within the settings panel.

<?php if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

So from here we copy and past the code above and insert it inside the single.php file, but before that I’ll give you a visual of what a sample blog post looks like within our theme.


Our blog post before the code addition.

Now we add the code above to the single.php file. The code needs to be within the WordPress loop and also before the article HTML tag within our specific theme. Your theme may vary, but the loop will always be present if you’re indeed using WordPress.


We add the code provided by the Yoast plugin to trigger the theme and plugin to output our breadcrumbs.

With the code added, all of our blog posts now have breadcrumbs. Now I know using breadcrumbs in the way I have here doesn’t prove to be that useful. In fact, I don’t recommend you use this on your posts, but rather on pages and only pages that are many levels deep. Large sites like I spoke of before need breadcrumbs to help the user keep order of where they are on the site and how to step back to different pages if needed.

Here’s the new look of our post after adding the code.


And here’s the blog post after we added the PHP code.

If you look closely you’ll notice new links and text present before the post title in the image above. See how easy it is to add breadcrumbs?

Any of the plugins I spoke of before will help you achieve what we have done here. Some of those I mentioned automatically embed the code on your pages or post, which is great if you would rather not edit your code.

The code I detailed earlier used an id of breadcrumbs, which is selectable by CSS. This allows you to style your breadcrumbs to your hearts content.


From here I suggest you experiment with breadcrumbs. Install them using different plugins and find which one works best for you. Style them with CSS and make sure to include them only on pages that really require them. If your website has a lot of pages, then you will be a perfect candidate for using breadcrumbs to their fullest extent.

In the end breadcrumbs are meant to be a utility. Your users need to be able to traverse through your website with ease and not get stuck along the way. Breadcrumbs provide a richer experience, and when combined with WordPress, there’s no reason you can’t make use of this great feature.

Article thumbnail image by Milena Vuckovic /


  1. I really like the WordPress SEO by Yoast implementation of breadcrumbs as I have never had any issues with it. We use sthe yoast plugin on every website so no since in adding extra bloat with other plugins.

    Great Article! Thanks!

    • I agree, the plugin is nice, but I don’t think that Andy should be advocating killing birds, whether it be one bird, two or three. Additionally, the amount of stones used is irrelevant, for in the end, the bird will be no more.

      Cruelty against animals should not be taken lightly.


  2. Great Content, i’m going to use on my Divi theme. thank you Andy

  3. Please could you do a tutorial of yoast seo plugin? Everybody says is very good, but i imstalled it and has some many settings that i couldnt use it

  4. Useful Post. Navigation and Menus structure always leads to better engagement.

  5. Hi Andy, what will happen after you update the Divi version?

    Should we modify single.php every time we update the theme or there is a solution with the child theme?

    Thank you

    • You can go that route or yes a child theme is a safer bet as updates won’t conflict.

  6. I just made a note on my list of things I’ve chosen to ignore over the years with web design, and it reads “Breadcrumbs!!”

    And then this post showed up in my inbox. Thank you SO much for clarifying what they are and what they do. As I was reading I was wondering about whether they help SEO, and the next paragraph was the one on SEO.

    I loved your images to help me understand. I’m very grateful for this post. Thank you!

    • Glad we could help Carla 🙂 Thanks for the comment

  7. Very good article Andy, I used Yoast SEO plugin for my WordPress websites. But didn’t know deep knowledge or use of Breadcrumbs. So thanks for share valuable information.

  8. I am confused a bit. I thought that everyone should use breadcrumbs for seo but you seem to be saying it’s not a good thing to do UNLESS you have a lot of pages.
    So does adding breadcrumbs to a smaller site NOT help at all? Or worse, cause a problem?

    My thought was that if you use the Yoast plug in, why not turn breadcrumbs on, whether you have a large site or a small site?

    • There’s no right or wrong answer to your question. Basically it applies to your own site. Breadcrumbs help SEO sure but they are meant more as a utility for the user to know exactly where it is they are. I mentioned larger websites using this method because there are so many pages at hand. Smaller sites can utilize breadcrumbs but you have to ask yourself if it’s really needed.

  9. I already have breadcrumbs in use with the ET MyCuisine theme. I also use WordPress SEO by Yoast. Are the breadcrumbs I am using already SEO optimized, or should I go the Yoast route? Thanks!

    • Howard. I’m thinking it should already be optimized. You could try the Yoast route so it’s integrated as a complete package but that’s up to you. Maybe check your analytics to uncover more about your breadcrumbs (# of clicks, etc…)

  10. Actually, “breadcrumbs” comes from the Hansel and Gretel fairytale where they used breadcrumbs to find their way back home. Just a bit of trivia, but it shows why the word is used in web context.

    (Mom of 3)

    • Exactly what I was going to post, IreneK! Perhaps the post writer is too young to know or never heard the story growing up (different culture).

    • I have heard of this but it totally escaped me as I was writing this post. Love this! Thanks for sharing!

  11. Thank you for the article.

    I’m presently working with Divi and Yoast’s SEO plugin which I’ve used several times so I’m more or less up to speed on that portion of the process however my client is asking for breadcrumbs throughout the pages of the Divi site (there is no blog) and I am wondering where you put the code for pages and also is it possible to control the display location within the builder. (perhaps in a menu bar along the bottom for instance.)

    Thanks again.

    • Hi Ernest! Was your problem solved? I have the same problem here… if you already found a solution, please give me a help!
      Thank you very much!!

      • Indeed……. the author shows us how to implement it on posts, and then follows that by saying that he doesn’t think it’s a good idea and that we should put them on pages…… yet doesn’t show us how to do that! Utterly pointless. It’s like writing a recipe and then telling people not to bother with it, cook something else.

        • Must say I concur Dan – why not base the tutorial on a feature that’s relevant (and yeah – Andy indeed points it out – it should be pages).

          Followed exact instructions on Divi – placed code in single.php and copied to my child theme (activated) on the exact same spot as Andy’s screendump suggest. Also Yoast breadcrumbs are activated.

          Only result: my widget sidebar on all pages disappered. Honestly annoying!

          Article is below ET standards – either it’s outdated or it needs an overhaul showing a relevant case of placing the breadcrumbs on pages. Just my 5 cent.

          • Have to correct myself as per prev cmment: the sidebar issue was selfinflicted rather than due to the modification of single.php – my bad!

            IMO article still needs updating in terms of relevance though.


      • I am also extremely interested in this. There is also no answer to it in the support forum. Pages sure would be handy.

    • Hello Earnest and the other fellows that were interested,
      I inserted the Yoast code into the page.php file right before it calls for the page builder (line 22). It seems to be working.

      <article id="post-” >
      <?php if ( function_exists('yoast_breadcrumb') )
      {yoast_breadcrumb('’,”);} ?>

  12. Does Yoast allow you to just drop in a shortcode for the breadcrumb in a Divi Text Module via the text editor?

  13. Trying to do the exact same thing with getting bread crumbs to show on pages in the Divi theme.

  14. dont say that its simple, any plugin you have to screw with your code is no simple at all.

  15. Thanks for the info Team, Actually i was looking for the following article. Yup am using WordPress Seo By Yoast Plugin, so i am ready to rock.

    Kind Regards

  16. Awesome Content. I was little bit confuesd to include breadcrumbs in my divi wordpress theme. Thanks for this nice post. 🙂

  17. I am a starter, recently start working on web, breadcumbs is really a big problem for me but after reading your article its solved now. thank you so much for sharing.

  18. i added the yoast breadcrumbs to my profit mag sinlge.php
    please i followed the step to get it like this

    if( $sidebar_layout == 'both_sidebar' ) {
    echo '’;

    <?php if ( function_exists('yoast_breadcrumb') { yoast_breadcrumb('’,”); } )?>

    i want to know if i am correct

  19. Thanks for a very helpful set of information .
    In the past I made my web site with lots of pages rather than posts and I’ve now used divi and a divi child theme.
    To get the breadcrumbs to show up on my pages I copied the page.php file from divi folder to my child theme and made the same changes in the file in the child folder.
    It all seems to have worked okay, is there anything I may have any problems with?

  20. Apologies to rebekah – I hadn’t seen her comment (quite a way above) when I posted mine.

    I have a question that I can’t see an answer for.. the breadcrumbs start way over on the left of the screen, I’m using divi builder and there’s a nice white space at the left of my body text.
    So the breadcrumbs look a bit thrown on as an afterthought. is there any code that will let the breadcrumbs line up with the text?

  21. Hi !

    your articles are very helpful for every blogger specially for the newbies like me.
    I am almost becoming regular reader of your site.
    You are an Inspiration to me. Thanks for this useful guide!

  22. I’ve used Yoast’s SEO Plug and activated the Breadcrumb. However it looks pretty ugly (the font used seems from a website from the 90’s), very different in style and size from the ones in Divi.

    Is the poor styling of font because I included in my site through the shortcode (using Code module)?

    I appreciate if anyone could advise me how to make it look better. Tks!

  23. When i add the php code into page, header or single.php i cant get the breadcrumbs positioned beneath the header images. Anyway I can get the code positioned right after the header image and before textual content? It not a blog, they are static pages.

  24. Any plans to implement breadcrumbs straight into divi in the future? Otherwise my main question is in regards to a statement in your conclusion “Style them with CSS and make sure to include them only on pages that really require them” If we go with Yoast SEO is it even possible to have it appear only on certain pages? Thanks! Also just a note, our real estate website for Lake Norman was built using Divi! I love how you guys have really gave everyday people the ability to be so creative without using code! Keep it up.

  25. hello , despite all the information collected about instalr breadcrumbs , including the one in this forum , I can not add the breadcrumbs to my project , I’m using divi issue as seo template by Yoast with plugin, can someone please help me?

    I managed to install the code in the file simple.php and works great, but in terms of the page.php file I could not do it , at least in the head or under the fullwidth header module ,

    Google translator

  26. To add breadcrumbs to Divi (ver. 2.5.3) with Yoast SEO under a slider do the following:

    1. Open main-structure-elements.php in your themes/Divi/includes/builder/ directory.

    2. Find this “”

    3. Above it, before $output = sprintf…. add the following lines:

    if ( function_exists(‘yoast_breadcrumb’) && !is_front_page())
    $breadcrumbs = yoast_breadcrumb(“”,””,false);

    4. Inside the $output = sprintf… after %10$s line add:


    5. Now it’s time to style it. Open your styles.css and add at the very bottom:

    .breadcrumbs{ padding: 0 !important; }
    .breadcrumbs:before{ width: 0 !important; }

    6. You’re all set.

    • Ahh html get’s stripped:

      2. Find this – .et_pb_section

      4. Inside the $output = sprintf… after %10$s line add:

      div class=”container breadcrumbs” ‘.$breadcrumbs.’ /div (add the divs )

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest