Do you want to enable WordPress Breadcrumbs on your WordPress site?
Breadcrumbs are an amazing tool to improve the user experience and scale the search engine optimization of the WordPress site.
In this article, I am going to show you how to turn on the breadcrumbs. You will get to know how they work and how to make the best out of them.
- What are WordPress Breadcrumbs
- Types of Breadcrumbs
- Advantages of WordPress Breadcrumbs
- Add WordPress Breadcrumbs to Your Site
- Disable WordPress Breadcrumbs
What are WordPress Breadcrumbs?
WordPress breadcrumbs are a website navigation tool that allows users to see the location of the current page in website structure. The breadcrumbs provide a track of links that lead them to the previous pages.
This trail of pages improves the user experience and helps google bots to understand the structure of the site.
Check out this example from the IsitWP Blog Post:
The trail looks like this:
Home>Plugins>Yoast SEO Review
It started on the first page of the site, which is usually the homepage. And then, via the category, it ends with the blog post title. Each of the labels is linked to the said page.
Due to this, the user can quickly reach the previous page of the site with one click. WordPress reduces the hassle of the back button, menu, and search option, which eventually leads to a good visitor experience.
The purpose of WordPress Breadcrumbs is to make the navigation on the site flawless for the visitors by displaying the quick links of the hierarchical navigation menu.
Types of Breadcrumbs
If you are a frequent web surfer, you may have observed there are various types of breadcrumbs sites implement.
However, the three most common ways of displaying WordPress Breadcrumbs are:
Hierarchy-based breadcrumbs
They are the most common. Hierarchy-based breadcrumbs tell you the location of your page in the website structure.
With one look at such breadcrumbs, and you will know the depth of the page in the structure of the site, and how far is the homepage.
For example: Home>SEO>WordPressSEO>Best SEO Plugins for New Blog
Attribute-based breadcrumbs
Mostly associated with eCommerce, Attribute-based eCommerce has displayed the attributes the user searches on the site.
The trail is made of the search queries the visitors used while looking for the product.
For example: Home > Product category > Gender > Size > Color
History-based breadcrumbs
History-based breadcrumbs are as the name said. The trail shows the pages you visited on the site.
Home > Previous page > Previous page > Previous page > Current page
With this, you can quickly move to the page you visited before.
Advantages of WordPress Breadcrumbs
Improving the User Experience:
WordPress Breadcrumbs helps the visitors to know where they are on your site—no one likes to get lost among the pages and links.
People look for something that reminds them of some recognizable page, and there, the breadcrumbs show them the way. At a glance, the user could know their location and a way out.
It also speeds up the process of moving inside the site, as the user does not have to go to the menu every time.
Overall, the breadcrumbs make the site more user-friendly in a small way.
Google Friendly
Google also loves WordPress Breadcrumbs as they give useful information to Google crawlers.
It is another way for Google to read the structure of the site more clearly.
For now, Google is forcing the results to display the Breadcrumbs instead of the URL of the page.
To do better searches for the user, google displays the position of the page on the site.
The better Google will understand the structure of the page, the better it can rank the pages for the right searches.
How to Add WordPress Breadcrumbs to Your Site?
Adding WordPress Breadcrumbs to the site is not difficult, and you can quickly and easily add the tool.
There are various methods for WordPress beginners, experienced users, as well as developers. You can work with anyone.
#1 Enable Breadcrumbs with a WordPress Breadcrumbs Plugin
Most of the SEO Plugins would do the job of implementing WordPress breadcrumbs. However, by any chance, your SEO plugin is not able to enable it, you can install a separate plugin.
Many plugins are developed solely for this purpose.
Breadcrumb NavXT
Breadcrumb NavXT is the most popular and widely used WordPress plugin for generating breadcrumbs.
The plugin creates the location-based breadcrumb trail. These breadcrumbs are highly customizable and offer the options to add or remove categories in the trail.
Breadcrumbs NavXT also includes schema markup for improving SEO.
Features:
- Extensive breadcrumb customization via setting page
- WordPress Widget
- Extensible via OOP
- Compatible with WordPress Multiple Language Plugin
- Works with bbPress and BuddyPress
How to use: Widget Available. Placed the Widget wherever you want to show the breadcrumbs.
Flexy Breadcrumb
Another highly-rated plugin for breadcrumbs is Flexy Breadcrumb.
The plugin is short compatible, and you can display the breadcrumbs with a simple shortcode, which is better than the widget option and offer more flexibility.
Features:
- SEO optimized Schema
- Configurable breadcrumb look
- Home text and End text editing
- Google font compatible
- Re-sizable fonts
- Customizable colors
How to use: Use shortcode.
WooCommerce Breadcrumbs
It is a simple WordPress Plugin that allows you to restyle the WooCommerce breadcrumbs.
By changing the HTML surrounding your breadcrumbs, you can change the separator character and display an unsorted list.
Features:
- Breadcrumb separator editing
- Home text editing
- Clean interface
- SEO schema
- HTML Editing
How to use: Enable the breadcrumbs from the dashboard after activating the plugin
Breadcrumb
Breadcrumb is a light-weight plugin to display the navigation to your websites easily. It is easy to customize and configurable plugin.
You can use hooks to rewrite the plugin without touching the code and design the tool to complement the site.
Features:
- Use via short-codes
- Custom front text
- Custom separator text
- Override via filter hook
- Additional CSS integration
- Multilingual
How to use: The setting for the tools would be available at the dashboard as soon as you activate the plugin.
#2 Breadcrumbs with Themes
The latest WordPress themes do have the inbuilt function of WordPress breadcrumbs.
With these themes, you only have to enable the breadcrumbs from their setting.
If you are redesigning your site, or only making a new site, it is wise to go with the theme that does have breadcrumbs settings.
The code that comes with the theme would be much more lightweight than any other method. Also, the look of the breadcrumb would be in correspondence with the theme.
However, if you have a baked site, changing the theme for the sake of breadcrumbs is not a smart idea. For that, you can go with plugins or other methods.
#3 Add Breadcrumbs Manually
WordPress Plugins are the easiest way to begin the breadcrumbs on your site. However, they are for beginners.
If you are a developer and knows the WordPress inside out, you can add the breadcrumbs manually too. The code will offer you much more flexibility than any other way.
Now, adding the breadcrumbs with the code is a three-step process:
Create Breadcrumbs
Add the get breadcrumb function code to the function.php file.
Function code:
function get_breadcrumb() {
echo '<a href="'.home_url().'" rel="nofollow">Home</a>';
if (is_category() || is_single()) {
echo " » ";
the_category(' • ');
if (is_single()) {
echo " » ";
the_title();
}
} elseif (is_page()) {
echo " » ";
echo the_title();
} elseif (is_search()) {
echo " » Search Results for... ";
echo '"<em>';
echo the_search_query();
echo '</em>"';
}
}Displaying the breadcrumbs
After adding the function, you have to fetch it to those files where you want it to appear.
If you can function in a single.php file, the breadcrumbs will appear on the posts. To display the breadcrumbs at the header, you need to call the function in header.php.
The code for calling is:
<div class="breadcrumb"><?php get_breadcrumb(); ?></div>Styling the breadcrumbs
The previous two steps will start displaying the breadcrumbs, but you need to design them.
After some styling, they will look pretty with the themes, and a visitor would be much satisfied with the look of the page.
You can use CSS. The CSS code to modify the look of the breadcrumb trail is:
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb a {
color: #428bca;
text-decoration: none;
}There are many possibilities when it comes to CSS. So it may take some experimenting to get your breadcrumbs looking exactly how you want them.
How to disable the WordPress Breadcrumbs?
Disabling the WordPress breadcrumbs is as easy as enabling them.
You have to switch them off the way you turn them on.
- If you are using the Yoast Plugin, then you can easily disable the breadcrumbs from the Yoast setting.
- If you are using any other plugin, you can turn the breadcrumbs off from their setting. Or you can remove the widgets and shortcodes and stop displaying the breadcrumbs on the pages.
Although to disable the default breadcrumbs from the theme, you have to edit the PHP files.
Step1: Locate the place from where you want to remove the breadcrumbs. (single.php for blog posts, index.php from the main page, page.php for pages)
Step2: Now go to Appearance>Editor and open the file, as you decided from step 1.
Step3: Search ‘breadcrumbs’ and remove the line of code.
The process is a little bit complex if you have zero understanding of coding. In that situation, you should take help from the theme developers. Because removing the wrong line can break the theme.
Also Read
- Core Web Vitals WordPress Optimization Guide
- How to Disable Directory Browsing in WordPress?
- Automatically Log out Idle Users in WordPress
Final Thoughts
Architecture that is useful to the users and helps Google made a successful website.
By enabling breadcrumbs, you offer an excellent tool for visitors to navigate through your site. Also, you let Google crawlers read the structure of your website in a better way.
Both of the things are helpful for the site.
In this article, I mention the best way to enable WordPress breadcrumbs.
If there is any doubt, do let us know in the comments.
