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.
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.
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.
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.
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.
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.
In our theme, we have it set to only add breadcrumbs on singular pages and not the homepage template.
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
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.
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 ?
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.
Is it posible to change the font size and the font color of Breadcrumb?
thanks
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 ?
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.
Hi. I’m afraid to manipulate codes. In case something goes wrong, can I just delete the inserted code without consequences?
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.
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.
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.
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 …?
Just copy the header.php to the the generate press child theme forlder.
Thanks for great post. Cheers!
Thank you so much. It is really working on my website God bless you
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
Breadcrumbs should automatically appear. If they don’t then please contact your theme’s support.
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?
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.
Great! This is really useful! Thanks a lot!
thanks you , really usefull