Elegant Themes Blog

Stay up to date with our most recent news and updates

How To Add Breadcrumbs To Your WordPress Website

Posted on August 6 by in Tips & Tricks | 21 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 homedepot.com or web services like Dropbox or Box

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

homedepot

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

dropbox

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.

Demo

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.

wp-seo-yoast

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.

wordpress-seo-installed

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.

internal-links

Click Internal Links inside of the new SEO settings menu

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

internal-links-settings

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.

divi-single

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.

post-before

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.

single-code-added

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.

post-after

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.

Conclusion

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 / shutterstock.com

21 Comments

  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.

      -Kraymer

  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!

  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?
    No?

    • 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!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Current ye@r *

Join 261,586 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today

Pin It on Pinterest

Share This