How to Add Breadcrumbs In WordPress (Step By Step Guide)

User experience, search engine optimization, and dwell time are all essential factors in maintaining a successful WordPress website.

When visitors come to a website and can’t easily find the information they’re looking for, they’ll leave and look for a site that can meet their needs.

Therefore, in the case of e-commerce sites, providing an easy way for customers to locate similar products and navigate between sections will improve their user experience and sales.

The use of breadcrumbs (breadcrumbs or also known as navigation routes), is an effective method to improve navigation and . WordPress breadcrumbs show the relationship between pages or pieces of content on your site, helping your visitors and search engine crawlers understand the structure of your site.

You can use breadcrumbs on your website by choosing one of three methods: manually, using templates or plugins. To facilitate the process, in this article you will find an easy and simple guide for all three methods.

What are WordPress breadcrumb navigation links?

WordPress breadcrumbs or breadcrumbs are navigation links located at the top of a page or post. They show users their current location on the website by displaying categories that lead to the page they are currently on.

Additionally, they create a trail that visitors can use to navigate back to the home page.

However, breadcrumb navigation links are not exclusive to WordPress sites: you can find them on other websites. Take a look at our knowledge base:

In the example, All sections > Getting started > Creating your own website > How to create a website? they are links to the pages that lead to that article.

Instead of searching for other articles or clicking on the to returnwebsite visitors can simply click Starting or in other breadcrumbs to find more information on the subject.

Why should you use WordPress breadcrumbs?

Breadcrumbs fall into three categories:

• Attribute-based breadcrumbs. They are typically found on e-commerce sites and display product attributes that users have searched for. Example: Home > T-shirts > Blue t-shirts.
• Hierarchy-based breadcrumbs. They show visitors where they are in the site structure and how many pages away from the root page they are. Example: Home > Tutorials > How to create a blog.
• History-based breadcrumbs. They serve a similar purpose to your browser history, displaying pages in the order you accessed them. Example: Home > Previous page > Current page.

Regardless of the category, adding breadcrumbs to WordPress can improve user experience, improve SEO and .

Improve user experience

Breadcrumbs provide an easy way to navigate your site, which is especially important for first-time users. Navigation links eliminate the need to use the browser’s back button or perform multiple searches

A great user experience keeps site visitors happy and increases their time spent on your website, exposing more of your content to them.

They improve SEO

In addition to improving navigation, breadcrumbs are also useful for the . Search engine crawlers use breadcrumb navigation links to understand the structure of your site and index web pages more accurately.

Google even displays breadcrumbs on its results page to help users understand if the page is relevant to their search:

Reduce bounce rate

Bounce rate refers to the percentage of visitors who come to a website and leave right after, instead of exploring other content within the site.

If the web page they are visiting does not provide them with what they need, breadcrumbs guide them to other parts of the website. For example, if a user can’t find the blue t-shirt she’s looking for, she can easily browse other categories or find a related product.

Thus, they are less likely to go to another website or return to search engine results pages.

How to add WordPress breadcrumbs to your website?

There are three ways to add WordPress breadcrumbs to your site: manually, using templates or plugins.

Manually add WordPress breadcrumbs

The manual method is ideal for people who are comfortable with coding and want more creative control over how breadcrumbs display on their WordPress site.

To activate WordPress breadcrumbs manually, you will need to add a function to your file functions.php.

To access the file, use the File Manager of your web hosting control panel or . For this tutorial, we are going to use the File Manager.

1. Access your hPanel.
2. click on hostingfind your domain name and click Manage.

3. Scroll down to the section Records and click on the File Manager.

4. Click on the folder public_html and then in the folder wp-content.

5. Click on the theme folder.

6. In the list of available theme files, click the one you’re using.

7. Scroll down and click on the file functions.php.

8. The code editor will appear, as seen below. Add the breadcrumb function you want and click the button Save and close.

9. Lastly, call the theme files function wherever you want the breadcrumbs to appear on your website. If you want them to appear at the top of all your posts, call it in the file single.php. It will look like this:

Add breadcrumbs in WordPress from a template or theme

Adding WordPress breadcrumbs with breadcrumbs functionality is a great method for those starting a new website or redesigning their website.

To activate the functionality of breadcrumbs, you must first install and activate the theme or template. Several templates already come with a built-in breadcrumb feature, such as aster Y OceanWP.

Statistics:

• Downloads: 1,000,000+
• Assessment: 5/5
• Feature highlights: breadcrumbs, customization options, WooCommerce ready, widgets
• Price: freemium

Astra is a beautiful and lightweight WordPress theme that provides a way to add breadcrumbs to WordPress websites effortlessly.

To add breadcrumbs to your site using Astra, follow these steps:

1. In your , go over Appearance and click Personalize.
2. Click on the tab Breadcrumbs.

3. Choose where you want your breadcrumbs to appear by clicking one of the options in the dropdown menu Position.

4. Customize the breadcrumb styling options to your liking.

5. Click the button Post to save your changes.

In addition to breadcrumbs, this template also offers the following features:

• Personalization options. Customize your template design with different layouts, a dedicated sidebar, and numerous fonts.
• WooCommerce ready. It works seamlessly with WooCommerce, offering features like quick product view and dropdown cart functionality.
• Widgets. It provides widgets for business address, information list and social icons.

Astra is available as free with limited functions. For more advanced options, it offers three premium plans: Astra-Pro a $59 a year, Mini Agency Bundle a $276 a year Y AgencyBundle a $523 a year.

Statistics:

Downloads: 700,000+
Assessment: 4.9/5
Feature highlights: breadcrumbs, WooCommerce integration, extensions, page builder plugin support, translation ready
Price: freemium

OceanWP is a fast loading WordPress theme with a link to WordPress websites.

Here is a step-by-step guide on how to add breadcrumbs to this theme:

1. In your WordPress dashboard, hover over Appearance and click .

2. Scroll through the list of Available widgets (if you can’t find this option in your WordPress, try installing the Classic Widgets plugin). Click the widget dropdown menu textselect the position you want and click Add widget.

3. Insert .

4. Modify the parameters of the WordPress shortcode – class, color and hover color – to your liking.

5. Click the button Save when you’re done.

As seen in step number four, there are three parameters to the shortcode:

• Class. Refers to the custom CSS class you are using.
• Color. It is used to set the color of the breadcrumb text.
• Color when passing over. The color that people will see when they mouse over the breadcrumbs.

In the example above, we have added a custom class with blue color and black hover color. The for blue is #0003FE, while the color code for black is #000000.

Apart from breadcrumbs, the OceanWP template also has the following features:

• Integration with WooCommerce. It’s eCommerce-ready, with built-in features like native cart popup and quick product view.
• Extensions. Provides various extensions to extend the capabilities of your site, such as custom sidebar, cookie notice, and post slider.
• Compatible with page builder. It works perfectly with numerous drag and drop page builder plugins like Thrive Architect, Brizy, and Elementor.
• Ready for translation. OceanWP supports multilingual translation, including right-to-left languages.

The free version of OceanWP is available with limited features. their are Staffa $39 a year for a site, Businessa $79 a year for three sites, and Agencya $129 a year for 25 sites.

Add breadcrumbs to WordPress with a plugin

If your template doesn’t come with the functionality built in, use a plugin to add breadcrumbs to the site. There are several options to choose from in the WordPress directory, but we have selected all four to add breadcrumbs to your website.

Plugin Statistics:

• downloads: 5,000,000+
• Assessment: 4.8/5
• Featured Features: breadcrumbs, keyword optimization, unique data structure, Google page preview, readability measurement, canonical links
• Price: freemium

Yoast SEO is one of the most popular for WordPress. Also, this SEO plugin comes with built-in breadcrumbs support.

Activating breadcrumbs on your site with Yoast SEO is a simple process. After installing and activating the plugin, follow these steps:

1. In your WordPress admin panel, hover over Appearance and do…