Breadcrumbs are useful navigational tools for any website. Apart from offering better navigation for users, they also are useful for search engine optimization. In this article, we will discuss more about WordPress breadcrumbs and how you can enable or disable it through different approaches.
How to enable WordPress breadcrumbs?
There are a few ways to enable breadcrumbs on your site. We will discuss them one-by-one below:
Add manually
If you are comfortable with coding, you can add breadcrumbs manually using code. For this, you can add a function to your functions.php file. Then, you can call this function to different template files depending on where you want the breadcrumbs to appear. For example, calling the function on single.php will display breadcrumbs on individual posts. Furthermore, you can add custom CSS to style the breadcrumbs as well.
Below is the example code to add a function to create breadcrumbs, provided by Kinsta:
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>”’;
}
}You can add further styling to breadcrumbs by adding custom CSS to your style.css file of your theme, or by providing it in the Customizer’s Additional CSS field.
Use an SEO plugin
You can use an SEO plugin such as Yoast SEO or All in one SEO to enable breadcrumbs on your WordPress site. If you are using Yoast SEO plugin, you need to add the following code to your site. Depending on where you need breadcrumbs to be visible, add it to single.php or header.php.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>Once the code is added, you can simply enable breadcrumbs from the plugin settings.
Use a Breadcrumbs plugin
You can also use one of the popular plugins to enable breadcrumbs on your site. We will take a quick look at some of these plugins here.
Breadcrumb NVXT
Using this plugin, you can manage different aspects of breadcrumbs, if you are not comfortable with the manual coding efforts in the above-mentioned options. You can simply specify how and where you want to display breadcrumbs according to your requirements.
In the Widgets section, you will find a widget for breadcrumbs that you can add to any section as per your needs.
Also, you will find a block in the Editor that will help you add breadcrumbs to individual posts or pages.
Furthermore, with this plugin, you can specify the breadcrumb separator, and also set blog and home in the breadcrumb trail with editable templates. You can also make use of templates available with the plugin for posts, pages, products, media, taxonomies, etc.
Flexy Breadcrumb
If you prefer to set breadcrumbs in your store in a simpler fashion, you can make use of this plugin that has a specific shortcode available with it. You can add breadcrumbs anywhere on your site with the help of the shortcode. In addition, you can apply unique styling and formatting to breadcrumb separator, as well as to the text and the links.
WooCommerce Breadcrumb
If you are using WooCommerce, you may want to display breadcrumbs on your product pages as well. Now, if you want to change the style of these, or want to disable them, you can use this plugin. The plugin provides tools that will help you change the HTML that wraps around breadcrumbs on your site. Using this plugin, you can change the breadcrumb separator, wrap-before and after, home url, home text, etc.
With the help of a theme
There are several themes that will help you add breadcrumbs. If you are trying to add them to an already established website, this may not be the best solution. However, if you are newly creating a WordPress website, you can make use of a theme that supports breadcrumb navigation. Here are some of the popular themes that support breadcrumbs:
Storefront
Storefront is one of the easiest options to choose when you are looking for a theme for your WooCommerce store. It offers breadcrumb navigation by default.
Astra
Astra is one of the popular themes that offer breadcrumbs with a range of customization options. You can enable breadcrumbs in the theme customizer. The theme lets you change the position, alignment, spacing and also the separator. There are also options to change the colors and typography when you are using this theme. It is also compatible with plugins such as Yoast SEO and Breadcrumb NavXT.
Shopkeeper
If you are using the Shopkeeper theme, you will be able to enable and disable breadcrumb navigation. It is a feature-rich theme that offers hassle-free customization options.
How to disable WordPress breadcrumbs?
Depending on how you have added breadcrumbs, you can remove them too. For example, if you have used Yoast SEO or one of the other plugins mentioned in this article, you can disable them from the plugin settings easily. If you have manually added code to enable breadcrumbs, removing the code snippet will make sure that the breadcrumbs are disabled.
However, if you are using a theme that offers breadcrumbs by default, disabling them may not be that straightforward. One recommended strategy is to find the breadcrumb function in the header.php or single.php or page.php files and removing it. For example, if you are using the Storefront theme, you can use the following code snippet:
/**
* Remove breadcrumbs for Storefront theme
*/
add_action( 'init', 'wc_remove_storefront_breadcrumbs');
function wc_remove_storefront_breadcrumbs() {
remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
}As per this WooCommerce documentation, you can use the following code to disable breadcrumb navigation in most themes:
/**
* Remove the breadcrumbs
*/
add_action( 'init', 'woo_remove_wc_breadcrumbs' );
function woo_remove_wc_breadcrumbs() {
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}If you are using a premium theme, and not able to disable breadcrumb navigation from being displayed, you can contact the theme developer’s support team for help.
Hopefully, this article has provided you with a good idea on WordPress breadcrumbs and how to enable and disable it. If you have any queries or concerns, please leave a comment in the below section.
