Monday, January 25, 2016

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.






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.



{yoast_breadcrumb('');} ?>

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.


The post How to Display Breadcrumb Navigation Links in WordPress appeared first on WPBeginner.

No comments:

Post a Comment