WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
  • Deals
  • Glossary
  • Videos
  • Products
X
☰
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

WPBeginner» Blog» WordPress Plugins» How to Display Breadcrumb Navigation Links in WordPress

How to Display Breadcrumb Navigation Links in WordPress

Last updated on January 25th, 2016 by Editorial Staff
620 Shares
Share
Tweet
Share
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.

620 Shares
Share
Tweet
Share
Popular on WPBeginner Right Now!
  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

About the Editorial Staff

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

The Ultimate WordPress Toolkit

23 Comments

Leave a Reply
  1. Andres says:
    Oct 22, 2018 at 6:53 am

    Hi WPBeginner,

    Amazing post.

    I wonder the following.

    How do you make the “home” breadcrumb (in your case WPBEGINNER) appear in blogs and posts but not in your HOME page.

    I mean, when you go “home” I dont see the breadcrumb, but when I click on other page I see the breadcrumb.

    Thanks a lot for your time.

    Reply
    • Editorial Staff says:
      Oct 23, 2018 at 6:51 am

      In our theme, we have it set to only add breadcrumbs on singular pages and not the homepage template.

      Reply
  2. Manish Ransubhe says:
    May 17, 2018 at 5:39 am

    Hello, I am not using any plugin and I have never enabled Breadcrumbs.

    Why my search Result showing breadcrumbs help me to disable this

    Thank you

    Reply
    • Ravi Singh says:
      Aug 27, 2018 at 6:23 pm

      same problem happened with me. So I check my theme panel and my theme had enabled breadcrumbs. you can also check your theme panel for more info about this. and I was using Newspaper theme. So if you are also using this theme then it is the one who is create difficulties for you. Disable it from there.

      Reply
  3. Dua Centre says:
    Mar 7, 2018 at 6:31 am

    I have used seo yoast plugin. Breadcrumbs are being displayed on my webpages but not google search results . When will they start displaying in google search result as well ?

    Reply
  4. Walter says:
    Jan 11, 2018 at 8:59 pm

    Hello! Do you know if is it possible to insert the breadcrumbs inside the menu? I have to design a website with a vertical side menu, and the customer wants to have the breadcrumbs at the bottom of the menu.

    Reply
  5. DUy says:
    Jan 4, 2018 at 3:43 am

    Is it posible to change the font size and the font color of Breadcrumb?

    thanks

    Reply
  6. Sameer says:
    Nov 14, 2017 at 2:20 pm

    Hello,

    I’m using breadcrumbs using the Yoast SEO method, But it’s only showing on homepage it’s not showing in Google Search.

    Ex : the ideal structure should be Domain.com>Category but it’s showing as Domain.com/Category. can you please tell me how to implement this ?

    Reply
  7. Joshua says:
    Aug 10, 2017 at 8:13 am

    Hello.. I am using breadcrumb navxt and its widget is working. I inserted the code for the header.php using “insert header and footer” plugin but I can’t see any changes to my site even after saving and refreshing it.

    Pls help, because the widgets area is working but no breadcrumb is showing in my sites header.

    Reply
  8. juan luis says:
    Aug 3, 2017 at 3:04 pm

    Hi. I’m afraid to manipulate codes. In case something goes wrong, can I just delete the inserted code without consequences?

    Reply
    • WPBeginner Support says:
      Aug 3, 2017 at 11:51 pm

      Hi Juan,

      If you don’t want to use code method, then you can try the plugin method. This way you will be able to undo changes by simply deactivating the plugin.

      Reply
  9. Nate Balcom says:
    Dec 1, 2016 at 8:55 am

    By the way I’m using the Yoast code that you have above and it doesn’t display the correct hierarchy. It omits a link for categories, projects, galleries. Anything that isn’t a post basically gets handled the same way. It’s close, but not correct.

    Reply
  10. Nate Balcom says:
    Dec 1, 2016 at 8:51 am

    Thanks for posting this. I’ve been looking for a way to properly display my breadcrumb trail for the spiders. It gets a bit jenky with categories, projects, galleries and the like. I’ve been hand coding mine, but the php handles the hierarchy in the incorrect order. This is a huge help.

    Reply
  11. Anna says:
    Oct 17, 2016 at 3:23 am

    My child theme (GeneratePress, from their own child theme download) doesn’t have a header.php file.

    I’ve added the code into the parent GP theme header.php and the breadcrumbs are working now. But when I update GP …?

    Reply
    • subhan says:
      Mar 14, 2018 at 9:43 pm

      Just copy the header.php to the the generate press child theme forlder.

      Reply
  12. Sunil says:
    Sep 29, 2016 at 9:59 pm

    Thanks for great post. Cheers!

    Reply
  13. Raymond Chukwuman says:
    Jul 26, 2016 at 12:05 pm

    Thank you so much. It is really working on my website God bless you

    Reply
  14. Abiodun says:
    May 12, 2016 at 12:49 pm

    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

    Reply
    • WPBeginner Support says:
      May 12, 2016 at 10:02 pm

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

      Reply
      • Abiodun says:
        Jun 17, 2016 at 11:05 am

        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?

        Reply
        • Michelle says:
          Jun 29, 2017 at 2:03 pm

          Hey! You have to set a parent page for your page that you are publishing. mine was only showing home > current page until i set the current page as ‘child’ of the articles page, and the articles page as ‘child’ of the homepage. you can do it in the page editor.

  15. JOY says:
    Feb 6, 2016 at 11:14 pm

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

    Reply
  16. malek says:
    Jan 25, 2016 at 9:35 am

    thanks you , really usefull

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 600,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
MonsterInsights
MonsterInsights
Google Analytics made easy for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 25 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2019 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2019)
    • Which is the Best WordPress Slider? Performance + Quality Compared
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • 5 Best VPN Services for WordPress Users (Compared)
    • HostGator Review - An Honest Look at Speed & Uptime (2019)
    • SiteGround Reviews from 1032 Users & Our Experts (2019)
    • Bluehost Review from Real Users + Performance Stats (2019)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Start a Podcast with WordPress (Step by Step)
    • How to Choose the Best Domain Name (8 Tips and Tools)
    • How to Setup a Professional Email Address with Google Apps and Gmail
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2019 – Step by Step Guide
Deals & Coupons (view all)
Dreamhost
DreamHost Coupon
Get 40% OFF on DreamHost and get a Free Domain.
Elegant Themes
Elegant Themes Deal
Get all 87 amazingly beautiful WordPress themes by Elegant Themes for only $69. That is like $0.79 per theme!
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • Awesome Motive

Copyright © 2009 - 2019 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.