Wordpress.observer editorial team
Wordpress.observer editorial team

How to add WordPress Breadcrumbs to Your WordPress Site

Introduction

Breadcrumbs is a valuable tool for site navigation and is used by many websites around the world. WordPress Breadcrumbs provide value to visitors as it helps them orientate themselves on a website and understand where they are on the site hierarchy.

Breadcrumbs also have benefits for site owners as it helps in a number of ways:

  • Increased user experience : Breadcrumbs provide a lot of convenience to users who can easily understand where they are on a website and how to go back. This can result in higher user satisfaction, increased conversions and better usability.
  • Better internal linking : Breadcrumbs can help site owners in better indexing their website pages as it provides a way for Googlebot to navigate through the site. In addition, breadcrumbs also help in passing link juice throughout the website, which can result in better rankings for pages.
  • Easier site navigation : WordPress Breadcrumbs makes it easier for site visitors to navigate through a website as they can quickly understand the website’s hierarchy. This can lead to increased pageviews and better user engagement.
  • How to Add Breadcrumbs on a WordPress Site?
  • WordPress provides you with the option to add breadcrumbs either under “Appearance” or “Settings.”

How Do WordPress Breadcrumbs Work?

WordPress Breadcrumbs are added to the template files and work dynamically by updating as you move through the website.

The best way to understand how breadcrumbs work is by going through the code. Please note that, if you have a limited knowledge of coding, you might find it difficult to follow the code. However, if you’re comfortable with coding or know someone who can help you, I suggest that you go ahead and try adding breadcrumbs on your website.

Step 1: Placing the WordPress Breadcrumb Code in Your Theme

Open the header.php file (located in your theme folder) and paste the following breadcrumbs code between <header> </header> tags.

<?php if(function_exists(‘bcn_display’)) bcn_display();?>

Step 2: Configuring the WordPress Breadcrumb Code

Now, let’s go ahead and configure the breadcrumbs code. The following are the parameters that you need to set:

1. Homepage default: This parameter sets the homepage as the default in the breadcrumbs. You can also omit this parameter and it will show “Home” as the default.

2. Show Home Link: You can enable or disable the home link by setting this parameter to “true” or “false.” In most cases, you’ll want to keep it enabled.

3. Separator: This parameter sets the separator between the links in the breadcrumbs.

4. Link Text: You can change the text of the breadcrumbs link by setting this parameter.

5. Taxonomy: You can add breadcrumbs for taxonomies by setting this parameter to “true.”

6. Category: You can add breadcrumbs for categories by setting this parameter to “true.”

7. Enable Compatibility Mode: This enables compatibility mode by default and sets the first level to “Home” and all other levels to nothing.

8. Label: You can change the text of the breadcrumbs label by setting this parameter.

The following is an example of how you can set the parameters:

<?php if(function_exists(‘bcn_display’)) bcn_display(array(“home”=>”Home”, “show_home”=>”true”, “separator”=>’ :: ‘, “link_before”=>’ <span class=”screen-reader-text”>’,’link_after’=>'</span> ‘));?>

In the above code, I have set the home link as “Home,” set the separator as a pipe character, added a link before and after the breadcrumbs.

Step 3: Calling the WordPress Breadcrumb Code

Now, you need to call the breadcrumbs code in your template files. You can do this by adding the following code right after your opening <body> tag:

<?php if( function_exists(‘bcn_display’) ) bcn_display(); ?>

The breadcrumbs will now show up on your website.

Testing the WordPress Breadcrumbs Code

Now, let’s test the breadcrumbs code. I suggest that you create a page and add some content to it. Once you’re done editing the page, open it in your browser and click on View Source (in Firefox) or right-click and select View Page Source (in Chrome). You will now see the breadcrumbs code in the source code of the page.

Now, view the page in a different browser and click on the Inspect Element button. You will now see the breadcrumbs in the HTML code of the page.

You can also test the breadcrumbs by going through the website. You will now see a nice set of breadcrumbs that indicate where you are on the website.

Adding Custom WordPress Breadcrumbs

So far, we have looked at how to add the default WordPress breadcrumbs. However, you can add custom breadcrumbs by adding custom links. This can be done in two ways:

1. Using the WordPress Page Template Functionality

The following is an example of how you can use the page template functionality to add custom breadcrumbs:

<?php $bg_color = get_background_color(); $class = “breadcrumbs-item breadcrumbs-item-” . strtolower(get_post_type($post->post_type)) . ” breadcrumbs-item-current”; echo ‘<li’ . $class . ‘><a href=”‘ . get_permalink($post) . ‘” title=”‘ . get_the_title($post) . ‘”>’ . get_the_title($post) . ‘</a></li>’; ?>

In the above code, I have used the get_post_type() function to get the post type of the current post. I have then used it in a custom class to style the breadcrumbs.

2. Using the WordPress Functions

You can also add custom breadcrumbs by using the following functions:

<?php wp_list_pages(“title_li=&depth=”); ?>

The above function lists all the pages in a hierarchy. The following is an example of how you can add custom links in the breadcrumbs:

<?php wp_list_pages(“title_li=&before=<li class=’breadcrumbs-custom-item’>&after=</li>”); ?>

The above code adds a custom link before and after the list of pages.

How to add WordPress Breadcrumbs with plugins?

There are a number of plugins that allow you to add breadcrumbs to your website. The following is a list of some popular plugins:

1. WordPress Breadcrumb NavXT: This plugin allows you to add breadcrumbs to your website. It is easy to use and has a good support community.

2. Yoast SEO: This plugin allows you to add breadcrumbs to your website. It is easy to use and has a good support community.

3. Breadcrumb

Breadcrumb is a lightweight plugin that offers an easy breadcrumb setup. The plugin can be used within theme templates, thanks to the hooks and filters of the plugin. 

4. RankMath

RankMath is a relatively newer plugin that has managed to build a good community of users. This plugin also lets you set up breadcrumbs on your website. 

5. Flexy Breadcrumb

Flexy Breadcrumb is perhaps the easiest plugin to use on this list. It’s lightweight and integrates breadcrumbs directly in your desired locations.

6. WooCommerce Breadcrumbs 

This plugin is aimed at doing one single job: help restyle the default WooCommerce breadcrumbs.

Conclusion

In this article, we have looked at how to add WordPress Breadcrumbs. You can style the breadcrumbs using CSS, add custom links to the breadcrumbs, change the text of the breadcrumbs label, and more. We have also looked at how to call the breadcrumbs code in your template files. I suggest that you test the breadcrumbs code thoroughly before using it on your website.

You can download the sample code for this article here .

Thank you for reading! I hope you found this article helpful. Please don’t hesitate to leave a comment if you have any questions.

Stay Connected
Latest News
Get The Latest Updates

Subscribe To Our Weekly Newsletter

No spam, notifications only about new products, updates.

Categories