CAll Us: +1 888-999-8231 Submit Ticket

How To Use WordPress Breadcrumbs | Breadcrumbs UX [2022]

Although often overlooked, website breadcrumbs play a key role in improving user experience (UX) and search engine optimization (SEO).

But what are they, and how do they work?

Understanding the meaning of breadcrumbs and how they function gives you insight into the importance of this tiny detail to the success of your website.

This guide will discuss that. It will also explore different ways to add breadcrumbs to your WordPress website.

Read on to find out more about:

Breadcrumbs Meaning: What Are They?

Breadcrumbs (or breadcrumb trails) are secondary navigational links at the top of each post or page of your website.

Breadcrumbs help visitors understand where they are on your site. The trail shows the pages in a hierarchical order, making it easy for your visitors to track their way back to a relevant parent category or page.

In general, breadcrumbs improve the user experience and your website SEO.

Benefits of Using Breadcrumbs on Your Website

Every top website uses breadcrumbs, and that includes the Hostdedi blog. If you’re building a new website, using breadcrumbs has certain benefits:

  • Users can use breadcrumbs to map their way around your website, creating a satisfying customer experience.
  • Breadcrumbs reduce your bounce rates by making website navigation more intuitive.
  • Breadcrumbs improve your SEO. Using them leads to your website ranking higher in search engines and an improved click-through rate (CTR).

Here’s an example of what a breadcrumbs UX looks like:

Types of WordPress Breadcrumbs

There are three types of WordPress breadcrumbs:

1. Attribute-based breadcrumbs: This type of breadcrumbs is common in ecommerce websites. It shows the attributes the user searched for to get to the product they’re viewing.

2. History-based WordPress breadcrumbs: This type leads users back to pages they came from as they navigate from page to page within your website.

3. Hierarchy-based breadcrumbs: Hierarchical WordPress breadcrumbs show visitors where they are on your website. They also show the relationship between the page they’re on and higher pages.

Hierarchy breadcrumbs are the most common of the three types.

How To Add Breadcrumbs to Your Website

Breadcrumbs aren’t a complex feature to add to your website. You can do it in several ways:

1. Install a Theme With Breadcrumbs

If you’re building a WordPress site for your blog or business, you can opt for a theme with built-in breadcrumbs functionality. This method is quick and easy and requires little effort on your part.

Once you upload a custom theme or install one from the WordPress theme directory, your new website layout will display breadcrumbs.

One such popular theme is Astra Pro, which is available with Hostdedi WordPress plans.

Here’s how to set up breadcrumbs on Astra Pro:

1. Navigate to Dashboard > Appearance > Customize.

2. Select the Breadcrumbs tab.

3. Under the Breadcrumbs tab, open the drop-down menu. Here, you can choose where you’d prefer your breadcrumbs to appear:

4. After you select the ideal location of your breadcrumbs, you can customize them in other ways, such as the type of Separator, Spacing, and Alignment.

5. Once done, you can Publish your changes to the Astra Pro theme.

2.  Use a WordPress Breadcrumbs Plugins

One major drawback of new themes is that they can completely change the look of your website. These changes can hurt your brand and website identity, especially if your site is a critical marketing tool for your business.

An easy workaround for this problem is to use a breadcrumbs plugin. An excellent example is Breadcrumb NavXT.

So, how do you install it?

1. Go to Plugins > Add New and install and activate the Breadcrumb NavXT plugin.

2. In the left side panel, select Settings > Breadcrumb NavXT.

3. Once activated, this plugin loads default settings. However, you can change how breadcrumbs work on your entire website by selecting the General tab. The Post Types tab empowers you to specify the breadcrumbs format you prefer for posts and pages.

4. Once done, click Save Changes.

3. Set Breadcrumbs Manually

Although you can add breadcrumbs to your WordPress website using a theme or a plugin, you can also do it using code. If you’re a developer or an advanced WordPress user, you can add custom code to your website and activate breadcrumbs in a way that appeals to you.

Note: Be careful when editing code on your WordPress website. If you change certain functions, you may break some functionality or the entire website.

Ensure you’re using the latest version of WordPress and back up your website before making any major changes. That enables you to restore your website to a previous version in case your site breaks.

To set breadcrumbs manually, you’ll have to add a code snippet to your functions.php file. Once you access and open it with the WordPress code editor, you can add a snippet that looks like this:

<?php
/*=============================================
=            BREADCRUMBS			            =
=============================================*/

//  to include in functions.php
function the_breadcrumb() {

    $sep = ' > ';

    if (!is_front_page()) {
	
	// Start the breadcrumb with a link to your homepage
        echo '<div class="breadcrumbs">';
        echo '<a href="';
        echo get_option('home');
        echo '">';
        bloginfo('name');
        echo '</a>' . $sep;
	
	// Check if the current page is a category, an archive or a single page. If so show the category or archive name.
        if (is_category() || is_single() ){
            the_category('title_li=');
        } elseif (is_archive() || is_single()){
            if ( is_day() ) {
                printf( __( '%s', 'text_domain' ), get_the_date() );
            } elseif ( is_month() ) {
                printf( __( '%s', 'text_domain' ), get_the_date( _x( 'F Y', 'monthly archives date format', 'text_domain' ) ) );
            } elseif ( is_year() ) {
                printf( __( '%s', 'text_domain' ), get_the_date( _x( 'Y', 'yearly archives date format', 'text_domain' ) ) );
            } else {
                _e( 'Blog Archives', 'text_domain' );
            }
        }
	
	// If the current page is a single post, show its title with the separator
        if (is_single()) {
            echo $sep;
            the_title();
        }
	
	// If the current page is a static page, show its title.
        if (is_page()) {
            echo the_title();
        }
	
	// if you have a static page assigned to be you posts list page. It will find the title of the static page and display it. i.e Home >> Blog
        if (is_home()){
            global $post;
            $page_for_posts_id = get_option('page_for_posts');
            if ( $page_for_posts_id ) { 
                $post = get_post($page_for_posts_id);
                setup_postdata($post);
                the_title();
                rewind_posts();
            }
        }

        echo '</div>';
    }
}
?>

After adding those lines, you can now add this line of code to activate it:

<?php if (function_exists('the_breadcrumb')) the_breadcrumb(); ?>

To customize your breadcrumbs further, you can add a class in your CSS file with instructions for your breadcrumbs CSS code. You can use it to change the font, color, and other aspects of the breadcrumbs UX.

4. WooCommerce Breadcrumbs

Another way to add breadcrumbs to your website is to extend its functionality using the WooCommerce Breadcrumbs plugin for WooCommerce.

Installing the WooCommerce plugin to your website lets you sell products on it. It also comes with breadcrumbs functionality, which makes it easier for your customers to find products and pages on your website.

Here’s how to go about it:

1. Install and activate WooCommerce on your WordPress website. Then, install and activate the WooCommerce Breadcrumbs plugin.

2. Navigate to Settings > WC Breadcrumbs to customize your website breadcrumbs.

3. Click the Enable Breadcrumbs checkbox in WooCommerce.

4. You can also customize other breadcrumbs settings here, including a unique separator.

Final Thoughts: 4 Ways To Add Breadcrumbs to Your Website

If you’re looking to improve your customer user experience and site SEO, you can do so by using breadcrumbs. You can either use a theme, plugin, custom code, or WooCommerce. All those methods are easy to use — but take extra care when adding custom code to your website.

Need to build your new website on a robust platform? Try Hostdedi’ Fully Managed Hosting plans and build your first website today. You’ll also enjoy free migration from your old host and a 30-day money-back guarantee on all plans.

This blog was originally published in January 2015. It has since been updated for accuracy and comprehensiveness.

Source link

About the Author