Breadcrumbs WordPress

User experience is just as important as the content of your website. A user should be able to easily and intuitively navigate through your WordPress site. This is where “breadcrumbs” come in to play. Breadcrumbs WordPress plugins help you implement this helpful navigation aid in just about any theme.

It is virtually impossible to predict the specific post or page your visitor will end up browsing. Regardless of that fact, you are still expected to provide users with easy-to-follow navigation marks. This will help them move around your website.

This post will help you understand what “breadcrumbs” are and how they improve the overall user experience on your site. You’ll also be introduced to some free WordPress plugins that help you add breadcrumbs to WordPress without requiring any technical knowledge.

What are breadcrumbs in WordPress? 🤔

Breadcrumbs are footprints that help your visitor navigate your WordPress website in an organized way. You can use breadcrumbs to help a user go from one post’s page to another.

Here’s a summary from user experience experts Nielsen Norman Group:

Breadcrumbs are an important navigational element that supports wayfinding — making users aware of their current location within the hierarchical structure of a website. Breadcrumbs are a list of links representing the current page and its “ancestors” (parent page, grandparent page, and so on), typically going all the way back to the site homepage. NN/g has been recommending breadcrumbs since 1995, as they provide many benefits to users at almost no cost to the UI.

Traverse showing Breadcrumbs WordPress

For those who run an eCommerce website, breadcrumbs can dramatically improve usability and ultimately sales. You can use them to encourage users to check out related products from a particular category, i.e. Home → Products → Electronics → Wearable.

You don’t need to hire a web developer or learn advanced coding to implement this feature, either. Simply install a breadcrumbs WordPress plugin and you’re good to go.

Breadcrumb NavXT is an updated version of an older plugin named Breadcrumb Navigation XT. You can use Breadcrumb NavXT for generating location-based breadcrumb trails throughout your website. It has over 800,000 active installs and is popular among WordPress users.

Features ⚙️

How to use 💡

Once you install the Breadcrumb NavXT, navigate to Appearance → Widgets in your WordPress dashboard.

Breadcrumb NavXT

Drag and drop the Breadcrumb NavXT widget to the widget area of your choice and update the widget settings. You will be able to see the breadcrumb trail in the sidebar or the widget area you selected. You can also hide the trail on the homepage or reverse the order of the links.

You can also add the breadcrumbs directly to your theme’s template files by using the PHP function below:

bcn_display($return = false, $linked = true, $reverse = false, $force = false)

2. Flexy Breadcrumb

Schema structures are one of the most important aspects of SEO. This breadcrumb WordPress plugin is integrated with Google Fonts which makes your breadcrumb trail fit in seamlessly to the design of your website.

Features ⚙️

  • Shortcode compatible
  • Different breadcrumb separators
  • Set “Home” text and “End” text
  • Font Awesome icon picker
  • Customizable colors
  • Re-sizable fonts

How to use 💡

Once you install and activate the plugin, head to the Flexy Breadcrumb area in your WordPress dashboard sidebar:

Flexy breadcrumbs interface

The general settings offer a number of customization options. Select the “Home Text” (the text in front of your trail) and choose an icon from the catalog of free icons, thanks to the Font Awesome icon picker.

You can change your breadcrumb separator if desired. Simply enter the “/”, “→” or any other sign you’d like to see in the trail. The post type hierarchy helps you choose the format in which posts appear, using “Category”, “Date”, or “Tags”.

Flexy breadcrumbs interface

You can use the Typography section to fully customize the color of your breadcrumb trail. Save your changes and you will see them applied to your website. You can also manually add breadcrumbs by using the [flexy_breadcrumb] shortcode.

3. Yoast SEO

Yoast SEO is a powerful WordPress plugin. This plugin is known for handling the on-page SEO of a website, but did you know you can also use it to add breadcrumbs trail into your theme? Yoast is an all-in-one SEO solution which handles everything from SEO analysis to XML sitemaps, and breadcrumbs.

Features ⚙️

  • Designed for SEO
  • Boost search exposure
  • Create breadcrumbs for 404
  • Complete on-page optimization
  • Changeable breadcrumb separator

How to use 💡

To enable breadcrumbs in WordPress, go to SEO -> Search Appearance in your WordPress dashboard. You will see a tag labeled “Breadcrumbs” in the upper section of the screen. Slide the “Disabled” button to the left side and, just like that, breadcrumbs are enabled.

Yoast SEO breadcrumb options

You can enter the type of separator you want to see on your blog. The Yoast breadcrumb enabler will also help you alter the anchor text for the homepage (the one that appears in the trail). In addition to these features, you can change the breadcrumb for your site’s 404 page’s dialogue here, too.

Yoast SEO breadcrumb WordPress settings

Category, tag, and format level taxonomies are available for posts based on the breadcrumb trail. If you want to archive posts from a specific category, you can do that, too. Shortcodes help in making the whole implementation process easier.

You can either add the shortcode manually to specific posts or pages: Blog » 5 Best Breadcrumbs WordPress Plugins to Add Breadcrumbs to Your Site. Or, copy and paste the following code, provided by Yoast SEO, into the theme where you want the breadcrumbs to appear.

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

4. WooCommerce Breadcrumbs

If you’ve just created your WooCommerce store and want to install of few plugins to boost dynamic functionality; check out WooCommerce Breadcrumbs.

This plugin helps you manage the WooCommerce breadcrumbs with simple efficiency. You can change the separator character and display an unsorted list by changing the surrounding HTML.

Features ⚙️

  • Clean interface
  • Simple breadcrumb plugin
  • HTML changing tools
  • SEO friendly

How to use 💡

WooCommerce Breadcrumbs is a simple WordPress plugin. You activate it by going to Settings -> WC Breadcrumbs and checking the box to Enable breadcrumbs.

Enable WooCommerce breadcrumbs in WordPress

You can change the separator between the breadcrumb trails from the plugin’s interface. You can add HTML to your WooCommerce trail to customize the look and position of the object. Use wrap_before and wrap_after for adding the start and end code of your breadcrumb container. If you are using WooThemes, certain features might not be available.

Breadcrumb is another free WordPress breadcrumb plugin that has made our list. Breadcrumb will help you provide an awesome navigation with minimal setup. The Breadcrumb plugin will help you show breadcrumbs at any place you’d like throughout your site. Simply add the provided shortcode in your WordPress editor.

Features ⚙️

  • Custom separator
  • Shortcode available
  • Limit word link text
  • Fully-customizable text
  • Additional CSS integration
  • Multilingual

How to use 💡

Breadcrumb will be readily available on your dashboard as soon as you install it. General settings can be used to change leading text, manage separator text, and customize the last separator.

breadcrumb settings

You can manage the display limit on a word or character basis. You can even select whether or not you’d like to display “Home” in your breadcrumb trail. Enter the pages where breadcrumbs won’t be a good fit (Homepage, for instance). Save the changes and your breadcrumb trail is ready to start helping visitors navigate your site.

Choose your WordPress breadcrumb theme

You can also choose a theme in the Style option in the settings pane. This option is for customizing the color, size, and design of your breadcrumbs trail.

To display your breadcrumbs, you’ll need to add the [breadcrumb] shortcode.

To make your breadcrumb trail look more advanced, you can use custom CSS.

Summing up 📜

The wide range of breadcrumb plugins for WordPress has made it easier than ever for users to create a custom breadcrumb trail. Site owners no longer need to learn to code, to implement this feature and reap the benefits of breadcrumbs.

If you run a WooCommerce store and just want a simple plugin to manage breadcrumbs, use WC Breadcrumbs. For those who don’t want to add more plugins to their site, Yoast SEO is a perfect option. Breadcrumb and Flexy Breadcrumb are highly customizable plugins for adding custom breadcrumb trial.

Do you have any questions about how to add breadcrumbs to WordPress? Ask away in the comments!

Yay! ๐ŸŽ‰ You made it to the end of the article!

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (itโ€™s free)!