How to Display Breadcrumb Navigation Links in WordPress

The ability for site visitors to navigate through your website plays a crucial role in its UX. You need to ensure that anyone who lands on your website instantly gets a sense of the main structure of the website. Otherwise, you risk increasing your bounce rate and losing potential leads. One of the ways to avoid this type of issue is with the use of breadcrumb navigation. Breadcrumbs can boost the overall performance of your website through UX while at the same time contributing to your WP website SEO. In this article, we take a closer look at how to display breadcrumb navigation links in WordPress.

What is the Breadcrumb Navigation?

  • Breadcrumb navigation is a trail of links representing a hierarchical navigation menu. It acts as a secondary navigation system that gives users information about a page’s position within your site’s hierarchy.

What breadcrumbs do is create a trail that leads users all the way back to the home page, hence the name. This can be particularly helpful for certain sites where users have the need to be able to navigate to other pages with ease, online stores being an obvious example. However, when it comes to SEO, breadcrumb navigation helps the search engines understand the hierarchy and structure of your web pages. Additionally, breadcrumbs appear in Google search results, which gives your whole website more visibility.

How to Add and Display Breadcrumb Navigation Links in WordPress

It’s not hard to add and show breadcrumb navigation links in WordPress. So, whether you’re a beginner or a coding expert, you should be able to do this in a few simple steps. As there are more ways to do this, we’ll show you how to add and display breadcrumbs using different plugins.

Breadcrumb NavXT Plugin

The easiest way to add this type of navigation to your WordPress site is Breadcrumb NavXT Plugin. As you know, WordPress plugins can be used for a lot of different purposes.  You can use plugins to clone or duplicate your site, or for social media, or other purposes. However, when it comes to breadcrumb navigation, NavXT is a popular plugin that offers a WordPress widget used to place the navigation system. Plenty of options allow you to customize the navigation for users.

What you need to do first is search for the Breadcrumb NavXT plugin and install it. Once it’s done, click on the left-hand admin panel and select Add New Option, which will pull up the main settings page. The default settings should work for most websites. There are different tabs and each one offers different settings that might work better for your website.

  • On the General settings tab, you can determine the global settings of the plugin on your website.
  • The Post Types tab is very important, as it allows you to set up breadcrumb links for posts and pages individually.
  • On the Taxonomies tab, you can set the categories as you see fit, and you can find similar templates for your links.
  • The Miscellaneous tab allows you to change the author’s settings.
  • Make the changes that you feel the best help your website and remember to click on the “Save Changes” button to keep the changes.

Showing Breadcrumb NavXT on Your Website

In order to show breadcrumb navigation links in WordPress, you should go to Appearance and choose Customize. There, you can choose the position of your breadcrumbs in the Position dropdown. Also, you need to choose Breadcrumb NavXT in the Breadcrumb Source.

Yoast SEO Plugin

Another popular plugin is Yoast SEO and it’s useful for approximating search engine rankings and optimizing the content. However, there are some features that are used for boosting the visibility of your website, and you can also use it to add and display breadcrumb links in WordPress.

There’s more to Yoast SEO

The first thing you need to do is decide where you want to put breadcrumbs. Depending on it, you should add the following code to the desired location:

  • <?php
  • if (function_exists (‘yoast_breadcrumb’)) {
  • yoast_breadcrumb( ‘<p id=”breadcrumbs”>’ , ‘ </p>’ ) ;
  • }
  • ?>
Code, sometimes necessary to display breadcrumb navigation links in WordPress.
Code is sometimes necessary to display breadcrumb navigation links in WordPress

How to display breadcrumb navigation links with YOAST SEO

Depending on the theme and updates, there’s a chance of code override. In that case, you should contact your theme developer. Once you place the snippet, go to SEO and choose Search Appearance and click on Breadcrumbs. In Breadcrumbs settings enable Breadcrumbs. When you preview your site, you should be able to see breadcrumbs places on the desired parts of your website.

Flexy Breadcrumb

Flexy Breadcrumd is one of the plugins you can use to add breadcrumbs in WordPress. Once you install and activate the plugin, you’ll be able to add breadcrumbs with a [flexy_breadcrumb] shortcode. If you’re not familiar with shortcodes in WordPress, there’s a lot of material that will help you understand shortcode better.

In the dashboard sidebar, you’ll be able to see Flexy Breadcrumb item. Once you click on it, you’ll see settings that allow you to modify your home page – change the icon and text, set the character limit, and hierarchy. The Typography tab allows you to change the font size and color for breadcrumbs. After you’re done customizing your trail, add the mentioned shortcode on the place where you want to have your breadcrumbs.

WooCommerce Breadcrumbs

If you need breadcrumbs so that your clients to easily move between your product pages, then consider installing WooCommerce Breadcrumbs. Since you’re already using the WooCommerce plugin, this should be the easiest option for you.

Install and activate the plugin and go to Settings and find WC Breadcrumbs. You should not forget to Enable breadcrumbs. Then, you can choose your product pages.

Start working on improving your website UX today

It’s good that you know how to add and display Breadcrumb navigation links in WordPress. However, you should also remember the famous fairy tale – sometimes you can lose your way even when using breadcrumbs. And this is not something you want to happen to your visitors. This system should be placed in an area where it will feel like a strong addition to your website and allow visitors to instantly understand the structure of your website. After all, it’s important to have visitors on your mind, as you want to improve their experience.

404 error404 pageabove the foldadvanced cssAIDA modelakismet pluginbacklinks auditbehavior patternbounce ratebrowser compatibilitybulk deletecaching pluginscall-to-actionchild themecode snippetcolor schemecomment sectioncompetitors' backlinkscontact formconversion ratecreate child themeCTA buttoncustom pagecustom themedead linksdefault configurationdigital marketingdomain authorityeasy manageedit main pageediting toolsemail marketingengaging contentFAQ pluginsfilter spamfix site errorfolder structurefree pluginsfriendly toneGoogle analyticsgoogle rankingsGravity Forms pluginguest postingHeadless WordPressHow toimage optimizationincrease readabilityindex errorsinfluencer marketingkeyword researchlibrary assistantlink managementlink trackingloading speedlocal businesseslong-tail keywordsmedia replacemedia restrictionmobile optimizationmoney onlinemulti currency pluginsmysql queryonline presenceonline validatorpage builderpage creationpopup pluginproducts and servicesquality imagesquality serviceReact JSreaction buttonsredirect chainsresponsive designschema markupsearch rankingsearch termsSEO for bloggersSEO optimizationSEO professionalsSEO tipsSEO toolsshort linkssocial mediasocial media plugins for WordPressssh commandsstatic pagetargeted audiencetechnical performancetest metrictext formattheme setting uptime utilizationtips and trickstraffic increaseunique visitorsuser accessuser engagementuser experiencevisual designvisual elementsvisual reportweb crawlersweb hostingwebsite architecturewebsite auditwebsite designwebsite elementswebsite maintenancewebsite optimizationWebsite problemswebsite securitywebsite structureWhat’s new in WordPresswhite spacewoocommercewordpressWordPress admin email verification noticeWordPress debug modeWordPress functionalityWordPress pluginWordPress pluginsWordPress recovery modeWordPress responsive designwordpress securitywordpress themewordpress theme editwordpress tipsWordPress tips and tricksWordPress web hostingwp security