Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Display Breadcrumb Navigation Links in WordPress

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Display Breadcrumb Navigation Links in WordPress

Do you want to display breadcrumb navigation links in your WordPress site? Breadcrumb navigation is a secondary navigation system that tell users where they are on a website relative to the homepage. In this article, we will show you how to display breadcrumb navigation links in WordPress.

Breadcrumbs displayed on WPBeginner website

What is Breadcrumb Navigation and Why You Need it?

Breadcrumb navigation is a term used to describe a hierarchical navigation menu presented as a trail of links. It is often used as a secondary navigation that allows users to go up and down in the hierarchy of links.

Breadcrumb navigation links are different than the default navigation menu system in WordPress.

The purpose of breadcrumb navigation is to help users navigate around a website. It helps users understand where they are on a site. It also helps search engines understand the hierarchy of links on a web page.

Search engines like Google have started displaying breadcrumbs below the title of a site in the search results. This gives your website more visibility in the results and increases your click through rate.

Breadcrumb navigation in search results

Having said that, let’s take a look at how to add breadcrumb navigation links in WordPress.

Adding Breadcrumb Navigation using Breadcrumb NavXT Plugin

This is by far the easiest way to add breadcrumb navigation in a WordPress site. It is very flexible, easy to use, and has more options that you can imagine. See why we use Breadcrumb NavXT on WPBeginner.

First thing you need to do is install and activate the Breadcrumb NavXT plugin. Upon activation, you need to visit Settings » Breadcrumb NavXT page to configure the plugin settings.

Settings page for Breadcrumb NavXT plugin

The default settings should work for most websites. However you want to make changes to customize the settings as needed.

The settings page is divided into different sections. On the general settings tab, you can define how the plugin behaves globally on your site.

It allows you to modify the beadcrumb navigation links template. You will also notice that these link templates use Schema.org parameters in the link tag.

The post types tab under plugin settings, allows you to setup breadcrumb links for posts, pages, and any custom post types.

You can choose how you want to display post hierarchy. By default the plugin will use Site Title > Category > Post Title. You can replace categories with tags, dates, or post parent.

The taxonomies and authors tabs have the similar templates for your breadcrumb navigation links.

Don’t forget to click on the save changes button to store your changes.

Showing Breadcrumb NavXT on Your Website

The plugin requires you to edit your theme files. You need to add this code in your theme or child theme‘s header.php file 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>

That’s all you can now visit your website and see the breadcrumb navigation links by visiting any post or page.

Adding Breadcrumb Navigation Links Using Yoast SEO Plugin

First thing you need to do is install and activate the Yoast SEO plugin. We have a complete step by step guide on how to install and setup Yoast SEO plugin for WordPress.

Upon activation, you need to go to SEO » Advanced page and check the ‘Enable breadcrumbs’ option.

Yoast breadcrumb settings

Once checked, you will find several options to change how breadcrumbs would display on your site. Default settings should work for most folks however feel free to change anything that you like.

Once you are done, click on the save changes button to store your settings.

Showing Yoast’s Breadcrumb Navigation on Your Site

Some WordPress themes already support Yoast’s breadcrumbs. You can visit your website and click on single posts and pages to see if your theme displays breadcrumb navigation on the page.

If your theme does not automatically display breadcrumb navigation, then you will need to add a little code snippet to your WordPress theme.

Simply add this code in your theme or child theme‘s header.php file. You should place the code towards the end of the file.

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

That’s all you can now visit your website to see breadcrumb navigation in action.

We hope this article helped you display breadcrumb navigation links in WordPress. You may also want to see our list of 24 must have WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Abiodun says:

    I followed the steps, didn’t really work for me with the posts. I just saw the ‘Home Breadcrumbs’on my homepage. How do I make it appear for my posts please? I’m using Yoast SEO

    • WPBeginner Support says:

      Breadcrumbs should automatically appear. If they don’t then please contact your theme’s support.

      • Abiodun says:

        It worked…but the category do not appear before my posts, I just get Home>>posts title. How do I make categories appear before posts?

  2. JOY says:

    Great! This is really useful! Thanks a lot! :)

  3. malek says:

    thanks you , really usefull

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 comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.