Mastering Breadcrumb Navigation: A Step-by-Step Guide for WordPress Users

To enhance navigation on your WordPress website, consider implementing breadcrumb links.

Breadcrumb navigation helps users understand their location on your website in relation to the homepage. This breadcrumb trail is also visible in search results, improving your website’s visibility.

We utilize breadcrumbs on our own sites and have discovered that this feature simplifies navigation for readers across various pages. In this article, we will guide you on how to implement breadcrumb navigation links in WordPress.

Understanding Breadcrumb Navigation and Its Importance

Breadcrumb navigation refers to a structured navigation menu that appears as a trail of links. It serves as a secondary navigation tool, enabling users to ascend the hierarchy of your website’s pages.

Breadcrumb navigation links differ from the standard navigation menu system in WordPress.

Breadcrumb navigation enhances user experience on your website and aids search engines in comprehending the structure and hierarchy of links on a webpage.

When configured correctly, breadcrumbs can be displayed by search engines like Google alongside the page title in search results. This boosts your website’s visibility and improves your click-through rate.

This guide provides effective methods for properly setting up breadcrumb navigation using schema markup. Schema markup is a smart coding technique that helps Google recognize your breadcrumbs, allowing them to appear in search results.

Now, let’s explore how to add breadcrumb navigation links in WordPress. We will present two methods, so you can select the one that suits you best:

• Method 1: Adding Breadcrumb Navigation in WordPress with All in One SEO (Recommended)
• Method 2: Implementing Breadcrumb Navigation Using Breadcrumb NavXT
• Video Tutorial

Method 1: Adding Breadcrumb Navigation in WordPress with All in One SEO (Recommended)

This method is straightforward and is recommended for all WordPress users.

In this method, we will utilize All in One SEO for WordPress, the leading SEO plugin available. It allows you to enhance your WordPress SEO easily, even without technical expertise, and includes a user-friendly breadcrumbs feature.

After activating the plugin, you will be directed to the setup wizard. Follow the on-screen prompts to configure the plugin.

Need assistance with the setup? Check out our detailed tutorial on installing and configuring All in One SEO.

Next, navigate to the All in One SEO » General Settings section and click on the ‘Breadcrumbs’ tab.

All in One SEO automatically adds breadcrumbs schema markup to your website’s code, making it easier for search engines to locate it.

If you also want to show breadcrumb navigation links on your website, you need to enable the ‘Enable Breadcrumbs’ option.

By toggling this option, you can explore various breadcrumb display settings available for your WordPress site.

You have four different methods to display the breadcrumb navigation trail on your WordPress website.

1. Displaying Breadcrumb Navigation with Shortcode

Using the shortcode method is straightforward and allows you to include breadcrumb navigation links in your WordPress posts, pages, or product pages on your online store.

Simply edit the post, page, or product and insert the following shortcode where you want the breadcrumb navigation trail to appear:

[_aioseo_breadcrumbs]

When using the default block editor, the shortcode will automatically transform into a Shortcode block.

You can now save your post or page and preview it to see the breadcrumb navigation menu in action.

Here’s how it appeared on our test site.

2. Adding Breadcrumb Navigation with the Gutenberg Block

If you prefer not to use the shortcode option or can’t recall it, you can display breadcrumb navigation using the AIOSEO – Breadcrumbs block.

Simply edit the post or page where you want to show the breadcrumb navigation and add the AIOSEO – Breadcrumbs block.

The plugin will then provide a live preview of your breadcrumb navigation links within the content area.

Remember to update or publish your changes.

3. Adding Breadcrumb Navigation Using a Widget

The previous two methods require you to insert a shortcode or block in every post or page where you want to display breadcrumb navigation links.

What if you want to automatically display breadcrumbs for each post or page?

The AIOSEO Breadcrumbs widget makes this process simple.

Just navigate to theAppearance » WidgetsNavigate to the page and insert the AIOSEO – Breadcrumbs widget block. You can position it in your site’s sidebar, footer, or any widget area.

You have the option to provide a title for the widget, or you can leave it empty if that’s your preference.

Make sure to click the ‘Update’ button to save your changes.

Now, visit your website to see the breadcrumb navigation menu displayed on all posts and pages.

4. Implementing Breadcrumb Navigation with Code

This approach allows you to place breadcrumb navigation links exactly where you want them, but it requires adding code to your WordPress theme files.

If you are unfamiliar with this process, be sure to check out our article on how to add code snippets in WordPress.

First, determine where you want the breadcrumb links to appear. The most common location is just below the title of the individual post, page, or product.

WordPress themes utilize template files to render various sections of your website. For example, many themes include a file named content-single.php which is found within the template-parts directory of your theme.

Refer to our cheat sheet to identify which files need editing in a WordPress theme.

Next, edit your theme file using an FTP client. Refer to our guide on using FTP to upload files to WordPress for detailed instructions.

Then, insert the following code where you would like the breadcrumb navigation links to appear:

<?php
if ( function_exists( 'aioseo_breadcrumbs' ) ) {
    aioseo_breadcrumbs();
}
?>

Remember to save your changes and upload the file back to your website.

You can now visit your website to see the breadcrumb links in action.

Customize the Display of Breadcrumb Links in AIOSEO

By default, All in One SEO utilizes a template to show your breadcrumb navigation links, which includes links to your home page, category, parent page, and the title of your post or page, all separated by the ‘» ‘ symbol.

You can modify this by going to the All in One SEO » General Settings page and navigating to the ‘Breadcrumbs’ tab. Then, simply scroll down to the Breadcrumb Settings section.

Here, you can adjust the separator, choose to show or hide the home link, add a prefix, and more.

Once you’re done, don’t forget to save your settings.

Method 2: Implement Breadcrumb Navigation Using Breadcrumb NavXT

This approach is compatible with any WordPress SEO plugin. It’s user-friendly with a compatible theme, but if your theme isn’t compatible, you’ll need to modify your theme files to show the breadcrumb navigation links.

Start by installing and activating the Breadcrumb NavXT plugin. For detailed instructions, refer to our comprehensive guide on installing a WordPress plugin.

After activation, navigate to the Settings » Breadcrumb NavXT page to set up the plugin configurations.

The default configurations are suitable for most websites, but you can adjust the settings to fit your specific needs.

The settings page is organized into various sections. In the general settings tab, you can modify the appearance and options for your breadcrumbs.

You’ll also see that these link templates incorporate Schema.org markup within the link tag.

The post types tab in the plugin settings allows you to configure breadcrumb links for posts, pages, and any custom post types you may have.

You can select how to present your post hierarchy. By default, the plugin displays the hierarchy as ‘Site Title > Category > Post Title’.

You have the option to substitute categories with tags, dates, or post parents and modify the separator.

The Taxonomies and Miscellaneous tabs feature similar templates for your breadcrumb navigation links.

Remember to save your changes once you are finished.

Breadcrumb NavXT provides various options for displaying breadcrumb navigation links on your website.

1. Enable Breadcrumb Navigation with Theme Support

Many popular WordPress themes include a built-in feature to display breadcrumb navigation by selecting Breadcrumb NavXT or your preferred WordPress SEO plugin as the source.

For example, if you are using the Sydney theme, navigate to theAppearance » Customizesection. Then, click on the ‘General’ menu and select the ‘Breadcrumbs’ option.

Next, choose ‘Breadcrumb NavXT’ from the ‘Breadcrumbs Generator’ dropdown menu.

You can also specify where you want your breadcrumbs to appear by selecting an option from the ‘Position’ dropdown list.

If you are viewing a single post or page, you will see a live preview of your breadcrumb navigation links.

Make sure to click the ‘Publish’ button to save your changes.

2. Display Navigation Links Using the Breadcrumb Trail Block

You can also use the Breadcrumb Trail block to display breadcrumb navigation links.

Start by accessing the WordPress content editor and insert the Breadcrumb Trail block at the desired location to display the navigation links.

Next, proceed to update or publish your content.

Then, visit your website to see the breadcrumb navigation links in action.

3. Adding Breadcrumb Navigation Using a Widget

The plugin also includes a widget that allows you to showcase breadcrumb navigation in the sidebar or any widget-ready area.

First, navigate to the Appearance » Widgets page and add the ‘Breadcrumb Trail’ widget block to your site’s widget area, such as the sidebar or footer.

The default widget settings are suitable for most websites, but feel free to customize them if necessary. For example, you might want to hide the breadcrumb trail on the homepage.

Remember to click the ‘Update’ button to save your widget settings.

4. Adding Breadcrumb Navigation Using Code

The plugin also provides a coding method for displaying breadcrumb navigation links for more advanced users.

First, connect to your WordPress site using an FTP client. Then, navigate to your current WordPress theme folder located in the
/wp-content/themes/ directory.

WordPress themes utilize template files to present various sections of your website. For example, many themes incorporate a file named content-single.php found within the template-parts folder of your theme.

Refer to our cheat sheet to identify which files need editing in a WordPress theme.

Access the template file for editing, and insert the following code at the desired location to display the breadcrumb navigation:

<?php
if ( function_exists( 'bcn_display' ) ) {
    bcn_display();
}
?>

Remember to save your changes and re-upload the file to your website.

You can now check your website to see the breadcrumb navigation links in action.

We hope this guide has helped you learn how to display breadcrumb navigation links in WordPress. You may also want to explore our guide on showing different menus for logged-in users in WordPress or adding a mega menu to your WordPress site.

If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.