How to Add Breadcrumb Navigation Links in WordPress

Breadcrumb is a hierarchical navigation menu. Breadcrumb helps users to find where they move to and how to easily go back to previous pages where they had visited. These are the Secondary navigation that appears horizontally on top of web pages and usually below navigation bar or header. Breadcrumbs provide the ways to navigate around your websites easily. This article shows how to add breadcrumb navigation links in WordPress.

The term comes from the ‘Hansel and Gretel’ fairy tale in which the two little children drop breadcrumbs to form a track back to their home. Just like tale, the breadcrumbs in WordPress gives users a way to trace the path back to their original landing point. They hold links of each previously visited page by user. It also help search engines understand the link system on your webpage. Even sites like Google display breadcrumbs below the title of the search result.

How to Add Breadcrumb Navigation Links in WordPress

Normally breadcrumbs are horizontally arranged text links separated by the ‘greater than’ symbol (>). The symbol indicates the level of that page relative to page link beside it.

Uses of Breadcrumb Navigation Links

Breadcrumbs are mainly used for large websites and websites that have hierarchically arranged pages. Breadcrumb can be very useful in E-commerce site like Amazon. Breadcrumb is useless for single level websites that have no logical hierarchy or grouping. You can construct a sitemap or a diagram representing website navigation to help you decide if breadcrumbs is useful or not. Breadcrumb should be regarded as extra feature only and  should not replace the effective primary navigation menu.

Benefits

  • Breadcrumb increases user’s experience. It gives the ability for users to move around webpages easily.
  • Few number of click or action to reach a specific page.
  • Breadcrumbs have no impact in terms of content overload. It doesn’t occupy the screen space.
  • Breadcrumb can play a role to Reduce bounce rate.
  • Breadcrumbs gives your page better SEO. Google can easily trace your navigation links and add to result page,

How to Add Breadcrumb Navigation Links in WordPress

Using Breadcrumb NavXT plugin is one of the easiest and flexible way of adding breadcrumbs in your website. To display breadcrumbs using the Breadcrumb NavXT plugin follow these simple steps.

1. The plugin can be easily installed from WordPress repository. Go to Plugins > Add New. Search for Breadcrumb NavXT. Install and activate the plugin.
How to Add Breadcrumb Navigation Links in WordPress

2. You can find a new option added in the setting. Navigate to Settings > Breadcrumb NavXT which will take you to plugins setting page.
How to Add Breadcrumb Navigation Links in WordPress

3. The settings are not too complex. Even the default setting will work in most cases. However with few settings changes you can get a good looking and fully functioning breadcrumb navigation.
How to Add Breadcrumb Navigation Links in WordPress

The settings are divided into four tabs.

  • General tab allows to define the breadcrumb separator and change the settings for current item,home breadcrumb, blog breadcrumb and main site breadcrumb.
  • Similarly Post tab allows you to set the breadcrumb for pages and post or any other custom post types.
  • Taxonomies tab allows you to set category breadcrumbs, tag breadcrumbs and post format breadcrumbs.
  • With Miscellaneous tab you can limit the length of breadcrumb title, define author breadcrumbs, search breadcrumbs, date breadcrumbs and 404 breadcrumbs.
Also Read:   Backup Your WordPress Site with BackUpWordPress Plugin

After the settings are configured, don’t forget to click the save changes button.

Adding Breadcrumb Navigation Links Using Yoast SEO Plugin

Follow the steps to use Yeast SEO Plugin for adding breadcrumbs

1. Go to Plugins > Add New. Search for Yeast SEO. Install and activate the plugin. You can also check our guide on “Install and Setup WordPress SEO Plugin by Yoast”.
How to Add Breadcrumb Navigation Links in WordPress

2. To make necessary setting changes go to SEO > Advanced page.
How to Add Breadcrumb Navigation Links in WordPress

3. By default the breadcrumb is disabled. Under the breadcrumb tab enable the breadcrumb. You can make other changes too in the tab according to your requirement. However in most cases the default setting is good enough.
How to Add Breadcrumb Navigation Links in WordPress

4. Finally click the save button and your plugin ready for action.

If your theme support Yoast Breadcrumb, you should see breadcrumb navigation working whenever you move to single page or post from home page. But if you don’t see the breadcrumb navigation you might need to add little code snippet in your theme.

Make sure you add these code in the header.php file at the very end.

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

Now you should see the Breadcrumb navigation working in your website.

Despite of breadcrumbs being a useful feature, there are many times people use it in a wrong way. Breadcrumb should be used only when needed. It better not to use it if you don’t need it. Never use breadcrumb as primary navigation. When page have multiple categories with no proper hierarchy,breadcrumb can be inaccurate and confusing to user.

 

The following two tabs change content below.
Kantiman Bajracharya

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.

Share This Post