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.

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 the new rendition of the popular WordPress plugin known as Breadcrumb Navigation XT. It was rebuilt from the ground up to be better optimized than ever before. The plugin generates breadcrumb trails for your WordPress website. These trails are customizable to suit the needs of just about any website using WordPress. There is a simple interface to allow for customizations and unique classes added for developers looking to style or tweak the breadcrumbs even more. 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.

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.

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

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

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.

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('
','
');
} ?>

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.

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.

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.

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

The post How To Add Breadcrumbs To Your WordPress Website appeared first on Elegant Themes Blog.