X

How to Add Breadcrumbs to Your WordPress Site (3 Methods)

How to Add Breadcrumbs to your WordPress Website

Do you want to add breadcrumbs to your WordPress website?

Breadcrumbs or hierarchical navigation is a secondary navigation menu for your website. It’s different from your primary navigation menu and gives users a better understanding of your website pages and how they’re connected.

In this article, we’ll show you how to add breadcrumb navigation to your WordPress website.

Add Breadcrumbs to Your WordPress Website

Breadcrumbs are useful to navigate users on your site. The breadcrumb navigation system is also included in Google searches and helps you rank your site’s pages.

Google Breadcrumbs

Plus, if you have an eCommerce store, then breadcrumb navigation is useful to easily walk users through to product pages, categories, and searches.

That leads to improved user experience (UX) and, ultimately, more sales for you.

Let’s take a look at a few methods to add breadcrumb navigation to your WordPress website.

Method 1: Use a WordPress Theme With Breadcrumb Support

A WordPress theme is the first thing that you’ll install on your website. If your theme includes the breadcrumb navigation system, then you don’t need any other plugin or extension.

You can find 100s of WordPress themes that support breadcrumb navigation. Here’s our top 4 picks for the best WordPress themes:

1. Divi

Divi Theme

Divi is a powerful WordPress theme that comes with tons of features including breadcrumbs, homepage sections, custom widgets, header and footer layouts, and more.

Divi comes in 2 flavors: Divi Theme and Divi Builder (a plugin).

Divi Theme is best for users who want to make customizations by using one of its 100+ full site packs that come along with the theme.

The Divi Builder plugin works with any theme and is best for users who want to use it with other WordPress themes.

2. Astra

Astra

Astra is a fast and lightweight WordPress multipurpose theme. It comes with pre-built layouts to easily create any type of website.

The Astra theme features include SEO optimization, multilingual support, breadcrumbs, and more. It’s easy to set up for beginners without writing a single line of code.

3. OceanWP

OceanWP

OceanWP is a free WordPress feature-rich theme. It comes with a 1-click demo content importer and dozens of website layouts that you can use to launch any type of website quickly.

Inside, you’ll find parallax scrolling, breadcrumbs, sticky navigation, fullscreen layout, social icons, and more. The theme supports eCommerce to let you start an online store.

4. Ultra

Ultra

Ultra is a modern WordPress multipurpose theme. It comes with dozens of ready-made website templates for different business niches.

The theme features include color choices, custom backgrounds, fonts, header and footer styling, and breadcrumbs. It has built-in Themify page builder integration to quickly create and customize landing pages.

Method 2: Use a WordPress Plugin to Add Breadcrumbs to Your Website

There are multiple WordPress plugins to add breadcrumbs to your WordPress website. For this article, we’ll be using Breadcrumb NavXT which is a free plugin.

The first thing you’ll need to do is install and activate the Breadcrumb NavXT plugin. For more details, you should check out our guide on how to install a WordPress plugin.

Once you’ve activated the plugin, you need to go to the Settings » Breadcrumbs NavXT page in your WordPress admin area.

Under General settings, you can add a breadcrumb separator, link current items, add a home breadcrumb link, and more. You can also leave these settings as-is, and it’ll work for your website.

Breadcrumbs NavXT Settings

Next, you can visit the Post Types tab to modify the post breadcrumbs template, page breadcrumbs template, and media breadcrumbs template.

Post types

You can also replace the default post hierarchy for breadcrumb navigation from categories to dates, tags, and post parent.

Post Hierarchy

The settings will be the same for other templates, including pages, custom post types, taxonomies, and so on. You need to click on the Save Changes button to continue.

Now, you need to edit your theme’s header.php file and add this code where you want to display the breadcrumb navigation:


<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

After adding the code, you can visit your website to check out the breadcrumb navigation on your posts and pages.

Method 3: Use Yoast SEO Plugin to Add Breadcrumbs to WordPress

If you’re looking for another method to add breadcrumbs to your website, then you can also use the Yoast SEO Premium plugin.

The first thing you need to do is to install and activate the Yoast SEO plugin. You can check out our complete Yoast SEO review for more details.

After the activation, you need to go to the SEO » Advanced page in your WordPress admin area. From there, you need to check the Enable Breadcrumbs option.

Enable breadcrumbs

Next, you can add a breadcrumb separator, anchor text for the homepage, and more. Click on the Save Changes button to apply these settings.

Most of the WordPress themes are compatible with Yoast SEO breadcrumb navigation. In case the breadcrumb navigation doesn’t appear on your website, then you can add the following code to your theme’s header.php file.


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

The above code will add the breadcrumb navigation to your website.

We hope this article helped you learn how to add breadcrumbs to your WordPress website.

You may also want to check out our guide on how to create a full-screen welcome mat optin form in WordPress to welcome new users and engage them on your website.

Comments  Leave a Reply

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!
[63% OFF Today!]
[63% OFF Today!]
[63% OFF Today!]
[63% OFF Today!]
[63% OFF Today!]
[63% OFF Today!]
[60% OFF Today!]
[60% OFF Today!]
[50% OFF Today!]
[50% OFF Today!]