How to Add Breadcrumbs to Your WordPress Site

Easy navigation is essential on any WordPress website. People expect to find what they need with the fewest clicks possible, so you’ll want to make it feel effortless for visitors to locate specific content on your website.

On top of carefully planning your website in a logical way, adding breadcrumbs (not the edible ones) can provide visitors with an easy method for moving around your site and understanding how your site as a whole is structured.

In this post, we’ll cover what breadcrumbs are, why they’re useful, and how to use them in WordPress.

What are Breadcrumbs in WordPress?

Breadcrumbs are navigational aids that help visitors understand where they are on your website. Breadcrumbs show the hierarchy of your web pages, and visitors can use them to navigate back to a previous page or to discover more relevant content.

Take this example from Best Buy. If visitors enter their site on the “PC Laptops” page, they can view other related categories at the top of the page, like “Computers & Tablets” or “Laptops.”

Image Source

Why Add Breadcrumbs to Your WordPress Website?

With breadcrumbs, visitors can access related pages on your site with just a click. Aiding navigation in this way keeps visitors engaged with your content for a longer duration and exposes them to more of your content and product offerings.

Breadcrumbs also help lower bounce rates. Since visitors can access your website from any page, breadcrumbs act as a guide for visitors to explore other parts of your website.

But, breadcrumbs can do more than just enhance the visitor experience — they also improve your SEO. Putting breadcrumbs across your pages help search engines crawl your website to determine its internal linking structure. Google might also use your breadcrumbs in search results to help your visitors, as seen below:

To add breadcrumbs to a WordPress website, you can use a plugin or check whether your theme offers breadcrumbs built-in. In the next section, we’ll explain how to add them in a variety of ways.

Yoast SEO is a popular SEO plugin for WordPress. You can do a lot with Yoast SEO, including enabling breadcrumb navigation.

How to Add Breadcrumbs With Yoast SEO:

1. If you haven’t already, install and activate the Yoast SEO plugin under Plugins > Add New. This will add a new SEO option to your left sidebar.

2. Next, you need to add some code to your theme files that tells Yoast SEO where to display the breadcrumbs. Copy and post the code snippet below:

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

3. Click Update File to save your changes.

4. In the left sidebar, select Appearance > Theme Editor.

5. In the theme editor, paste the code snippet you copied to the bottom of one or more of the following theme files:

• header.php if you want breadcrumbs to show in your header across your entire site.
• page.php if you want breadcrumbs to appear on all your pages.
• single.php if you want breadcrumbs to appear on all your posts.

Here’s what the code looks like pasted into the header.php file of the Sinatra theme. The pasted code is shown in the red box:

It might take a bit of testing to find which breadcrumb placement presents the best user experience.

6. In the left sidebar, select SEO > Search Appearance.

7. Click the Breadcrumbs tab.

8. Under Breadcrumbs settings, click Enabled.

9. Selecting Enabled will reveal breadcrumbs settings. Configure these to your liking.

10. At the bottom of the page, click Save changes.

How to Add Breadcrumbs With Other WordPress Plugins

If you’d prefer a different tool to add your breadcrumbs, pick from our additional plugin recommendations below.

All in One SEO

All in One SEO (AIOSEO) is a complete SEO plugin and toolkit for WordPress. Over 2 million professionals use this popular plugin to improve their website search rankings. 

2. Complete the AIOSEO Setup Wizard. At the end of the setup, click Finish Setup and Go to the Dashboard.

3. In the left side panel, select All in One SEO > General Settings.

4. Click on the Breadcrumbs tab,  then click the On button next to Enable Breadcrumbs.

Image Source

5. Scroll down and click on the Shortcode icon. Then, copy the AIOSEO breadcrumbs shortcode underneath it. 

Image Source

6. Go to the the post or page you’re editing on your site and paste the AIOSEO breadcrumbs shortcode. 

7. Click on the Update button to save your changes. 

8. Preview your post or page to see that the new breadcrumb navigation is added.

Image Source

Rank Math

Rank Math is a WordPress plugin built to help users rank higher in search engines. To add breadcrumbs with this plugin:

1. Install and activate the plugin under Plugins > Add New. This will add a new Rank Math option to your left sidebar.

2. Complete the six-step Setup Wizard. At the end of the setup, click Return to dashboard.

3. In the left side panel, select Rank Math > General Settings.

4. Under the Breadcrumbs tab, click On next to Enable breadcrumbs function.

Image Source

5. Configure the breadcrumbs settings to your preferences.

6. When finished, click Save Changes.

Breadcrumb NavXT

For those looking for breadcrumb functionality without the extra SEO features, Breadcrumb NavXT is the go-to plugin. It offers extensive control to enable and customize your breadcrumbs.

1. Install and activate the plugin under Plugins > Add New.

2. In the left side panel, select Settings > Breadcrumb NavXT.

3. The default settings will be enabled. Under the General tab, you can modify how breadcrumbs work on your entire site. Options under the Post Types tab allow you to specify the breadcrumbs format for your posts and pages.

4. When finished, click Save Changes.

Breadcrumb

Breadcrumb is another lightweight plugin for breadcrumb navigation anywhere on your website using shortcodes. To use this plugin:

1. Install and activate the plugin under Plugins > Add New. This will add a new Breadcrumb option to your left sidebar.

2. Select Breadcrumb in the left sidebar.

3. Under Breadcrumb Settings, you can configure breadcrumbs to your liking.

4. When finished, click Save Changes.

5. Navigate to a new or existing page or post in your WordPress editor and add the following shortcode:

[breadcrumb]

Your breadcrumb will appear like this:

Image Source

Catch Breadcrumb

Catch Breadcrumb is a simple tool for seamless breadcrumb navigation. Unlike other plugins, you have the option to hide breadcrumbs on your homepage.

1. Install and activate the plugin under Plugins > Add New. This will add a new Catch Breadcrumb option to your left sidebar.

2. Select Catch Breadcrumb in the left side panel.

3. Under the Dashboard tab, configure settings to your preferences.

4. When finished, click Save Changes.

5. Add the following shortcode to your WordPress Visual editor:

[catch-breadcrumb]

6. Check your site pages for the new breadcrumb feature.

7. Check your site pages for the new breadcrumb feature.

Flexy Breadcrumb

Flexy Breadcrumb is popular for its easy implementation, and also uses shortcodes to add breadcrumbs to your website.

1. Install and activate the plugin under Plugins > Add New. This will add a new Flexy Breadcrumb option to your left sidebar.

2. Select Flexy Breadcrumb in the left sidebar.

3. Under General Settings, configure the settings to your liking.

4. When finished, click Save Changes.

5. Add the following shortcode to your WordPress Visual editor:

[flexy_breadcrumb]

SEOPress

SEOPress is a comprehensive SEO plugin to boost your organic search traffic. Ranked as a top-rated tool, this plugin offers breadcrumbs as a feature in its Pro version.

1. Install and activate the plugin under Plugins > Add New. This will add a new SEO option to your left sidebar.

2. In the left sidebar, select SEO > Breadcrumbs.

3. Under Configure your breadcrumbs, toggle the feature on.

4. Configure the breadcrumbs settings to your liking

5. When finished, click Save Changes.

6. In the left sidebar, select Appearance >Theme Editor.

7. Open your theme’s header.php file and add the code below to the bottom of the file:

 
 
if(function_exists(“seopress_display_breadcrumbs”)) {
 
seopress_display_breadcrumbs(); }
 

8. Click Update File to save your changes.

How to Add Breadcrumbs to WordPress With Themes

Most of the latest WordPress themes enable breadcrumb navigation, so you don’t need to add anything extra to place breadcrumbs to your website. Here are some themes with this built-in feature:

• Page Builder Framework: This theme makes it possible to customize your breadcrumbs.
• Knowledge Base: This theme navigates visitors through breadcrumbs within your customer support knowledge base.
• Astra: This theme lets you place breadcrumbs anywhere on a page.
• Shopkeeper: This theme allows you to enable breadcrumbs on your online store.
• WooThemes: This is a collection of WooCommerce themes with breadcrumb capabilities.

Follow these steps to turn off breadcrumbs in WordPress:

1. From your admin dashboard, select Appearance > Theme Editor.

2. Open the file where you added the breadcrumbs.

3. Use Ctrl + F (or Command F on Macs) to open your browser's search function. Search for “breadcrumb” to locate the PHP code.

4. Add two forward slashes (//) in front of this line of code. This temporarily disables the code.

5. Click Update File to save your changes.

Breadcrumbs are one of the simplest ways to help visitors get around your WordPress website, as well as increase organic search traffic. Your site’s layout shouldn’t be a mystery to users — with a breadcrumb trail, they’ll always know where they came from.

For more strategies for implementing this helpful feature, check out our post on breadcrumbs tips and examples.