How to Display Breadcrumb Navigation Links in WordPress
August 6. 2020
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.
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>’ ) ;
- }
- ?>
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.