The Fundamental Guide to Adding WordPress Breadcrumbs

Want to reduce bounce rates, improve website navigation, boost SEO, and offer amazing user experiences? Of course you do!

But if you’re not using breadcrumbs as part of your website, you’re missing out on a great opportunity. Breadcrumbs enhance site navigation by helping users to travel through your web pages more easily (via a trail of ‘breadcrumbs’). 

Chances are you’ve encountered breadcrumbs many times. They often appear just below a site’s navigation menu.

Source: dedoles.se

Today, we’re going to be sharing our top tips and tricks to help you add WordPress breadcrumbs to your site and start improving those user experiences. 

 

What Are Breadcrumbs?

Forget golden and crispy, freshly toasted, or panko. Those breadcrumbs may be oh-so-delicious, but that’s not what we’re here to talk about today. No, we’re here to discuss online breadcrumbs, an altogether more functional (and less edible) morsel. 

A breadcrumb is essentially a navigation link. Breadcrumbs are connected to create a text pathway through a website’s pages. They track where a user is on a website in relation to the homepage and are usually located at the top, just below the navigation bar. 

Breadcrumbs improve your site’s user experience (UX) by making it easier for users to backtrack on their navigation. They also support SEO rankings by helping search engines navigate through your web pages and link structures (more on this later). 

 

Understanding How the Different Breadcrumbs Work

Breadcrumbs can be applied to a website for a variety of reasons. For websites built in WordPress, for example, there are three types of breadcrumb that can be incorporated into a site’s navigation. These are hierarchy-based, attribute-based, and history-based. 

Hierarchy-based breadcrumbs

These are your classic breadcrumbs. Hierarchy-based breadcrumbs show website users where they are in your site’s overall structure in relation to the homepage. This allows visitors to easily navigate through categories and find related products. 

Attribute-based breadcrumbs

These breadcrumbs are most often found as part of eCommerce sites. Attribute-based breadcrumbs list the attributes a user has searched for to reach the product or page they’re viewing. 

For example, imagine you’re navigating through an online fashion store. Sometimes, you may be asked to refine your search in terms of product attributes (e.g. fit, style, color, size). The attributes you pick will make up your breadcrumb trail. 

Image source

History-based breadcrumbs

These breadcrumbs are chronological. They’re ordered based on what you do on a website. History-based breadcrumbs lead users back via the pages they’ve already navigated through. These breadcrumbs act a bit like the ‘back’ button on your browser to help users return to a page they’ve already visited. 

 

Benefits of Breadcrumbs

Breadcrumbs are incredibly useful for a website’s UX and SEO. As such, many content marketing services are promoting the benefits of breadcrumbs as part of a robust digital marketing strategy. 

Breadcrumbs allow users to navigate through a website more easily and help search engine crawlers understand a site’s content. That means improved search engine rankings, lower bounce rates, and better user experiences all around. 

 

Easier site navigation for visitors, meaning lower bounce rates

As a website visitor, there’s nothing more annoying than finding you’ve navigated to a product page you’re not the slightest bit interested in. At this point, you’ll probably want to do one of two things. 

• Bounce back to the search engine and start over. 
• Return to the homepage and try to find the page you were looking for. 

By adding breadcrumbs to your site, users will be less inclined to bounce and will find it much easier to locate what they’re looking for. Breadcrumbs allow site visitors to easily trace their user journey and locate the pages they want quickly. 

 

Site crawlers have an easier time ranking the right pages

Breadcrumbs boost site SEO by communicating to search engines what a site’s pages are about. Google actually uses a site’s name and breadcrumb trail in search snippets, meaning it’s one of the first things you’ll see when Google brings up a list of results. This, in turn, helps searchers see where they’ll be taken upon clicking. 

For example, if you search ‘what are breadcrumbs?’ in Google, your search results list each website’s URL, breadcrumbs, and title. 

 

Three Methods to Add Breadcrumbs to Your WordPress Site 

So, how exactly do you go about adding breadcrumbs to your WordPress site? Well, there are a few different routes you can take. We’re going to walk you through the various methods step-by-step. 

 

Select a WordPress theme that already includes breadcrumbs

The most straightforward way to add breadcrumbs to your WordPress site is to install a theme that already includes them. If you can find one that aligns well with your branding and has handy breadcrumbs too, then hey presto, you’re ready to go. 

 

Implement breadcrumbs through custom code

Another way to add breadcrumbs to your WordPress site is to implement them through custom code. Say you find a theme on WordPress but it doesn’t come with breadcrumbs included. With a bit of basic coding experience, you can add them yourself by editing the function.php file on your chosen theme. 

Here’s what you’ll need to do:

1. Connect WordPress to your server using an FTP site like FileZilla FTP. 
2. Click the public_html folder in the FileZilla client (this includes your website’s files).
3. Click the wp-content folder. 
4. Click the themes directory and choose your current theme folder.
5. Click on the functions.php folder then select view/edit. 
6. Insert the code below to register the breadcrumb function on your site.
7. Save changes and upload the updated file when prompted.

 

Use a plugin to add breadcrumbs.

A third and final way to add breadcrumbs to your WordPress site is to use a plugin. You’ll need to utilize a specialist tool to do this such as Yoast SEO, Breadcrumb NavXT, or WooCommerce Breadcrumbs plugin. 

Using the Yoast SEO plugin

Yoast is one of the best-known SEO plugins for WordPress and can be used to enable breadcrumbs on your website. If you’re already using Yoast for SEO, then this is your best bet, though there are other options available (which we’ll discuss in a moment).  

To add breadcrumbs using Yoast, follow these steps:

1. Install the Yoast SEO plugin from your WordPress dashboard i.e. plugins > add new > type ‘Yoast’ into the search bar > install.
2. In the Yoast plugin, navigate to appearance.
3. Click on the theme editor.
4. Select the template called header.php. 
5. Insert the code snippet below.
6. Save your changes by clicking on “Update file”.

 

Using the Breadcrumb NavXT plugin

Another alternative to using Yoast is Breadcrumb NavXT. This plugin can be installed on your site just like Yoast. Once installed, simply follow the steps below to implement breadcrumbs. 

1. In the NavXT plugin navigate to settings.
2. Click on breadcrumb NavXT.
3. Choose from the four breadcrumb navigation options. 
4. Configure the plugin and save changes.
5. Navigate to appearance. 
6. Click on the theme editor. 
7. Select header.php file. 
8. Insert the code below.
9. Click update file.

 

Using the Woocommerce Breadcrumbs plugin

Finally, if you’re a Woocommerce user, you can use the Woocommerce Breadcrumbs plugin to add breadcrumb functionality to your website.  

Here’s what you’ll need to do:

1. Install the Woocommerce Breadcrumbs plugin on your WordPress site.
2. Navigate to settings.
3. Click WC breadcrumbs. 
4. Tick the box next to enable breadcrumbs. 
5. Click save changes. 

Source: fixrunner.com

 

Customize WordPress Breadcrumbs with CSS 

You can style breadcrumbs by applying custom CSS to match your website’s unique style. If you’re coding your breadcrumbs yourself, you’ll need to have a think about the aesthetic you’re aiming for. 

To do this, you’ll need to add custom CSS to style your breadcrumbs within your existing theme stylesheet or from within the WordPress Customizer. Here, you’ll be able to make design tweaks to your breadcrumbs including adapting fonts, colors, margins, icons, and borders. 

 

Two Ways to Remove Breadcrumbs from Your Site 

Breadcrumbs have obvious advantages when it comes to aiding site navigation and SEO for growth, but not everybody likes to include them. If you’ve decided you want to remove your site’s breadcrumbs, there are two ways you can do this. 

Toggle the disable switch 

The first way to remove breadcrumbs is simply to toggle the switch in your plugin to disable breadcrumbs or deactivate the plugin altogether. 

Remove the manually inputted code

The other option is to remove the manually inputted code. Simply return to your site’s header.php folder and delete the line of code that adds breadcrumbs to your site. 

 

Leave a trail of breadcrumbs 

Breadcrumbs are a great addition to any website. They help users navigate through your web pages and search engine crawlers to understand your content that bit better. 

What’s more, incorporating breadcrumbs into your site is fairly straightforward. Some WordPress templates even have breadcrumbs included. 

If you’re not breadcrumbing already, what are you waiting for?