How to Enable Breadcrumb Navigation in WordPress

Help Your Website’s Visitors Find Their Way

Breadcrumbs are a navigation mechanism that can improve your website’s user experience. Much like how Hansel and Gretel used literally breadcrumbs to find their way out of the forest, the metaphorically website version allows your visitors to find their way back across the pages they’ve already navigated through.

Breadcrumbs are especially useful on complex websites: Successful e-commerce sites with a plethora of product and product categories almost always have some sort of breadcrumb navigation. It allows a user to backtrack through their shopping history without forcing them to start over from the beginning.

How to Enable Breadcrumbs

There are a few different ways you can add breadcrumb navigation to your WordPress website. Of course, the kind of website you have needs to be taken into consideration, and you need to know what kind of breadcrumbs work best.

Use a Theme with Breadcrumbs Included

The simplest method for enabling breadcrumbs on your site is to use a theme that supports them to begin with.

1. Astra

Astra is a popular multi-purpose theme that’s used by numerous WordPress websites. If you’re currently using it for your own website, enabling breadcrumb navigation is relatively straightforward.

To enable them, simply navigate to Appearance and then Customize in your WordPress dashboard and then select the Breadcrumb tab.

From here, you’ll see a dropdown menu to choose where you’d like to have your breadcrumbs displayed. Once selected, various styling options will appear so that you can customize the visuals of your breadcrumbs.

2. OceanWP

OceanWP is another popular WordPress plugin that has breadcrumbs baked into it, though you’ll need to use a WordPress shortcode to enable them. To enable them, you simply add [oceanwp_breadcrumb] to a blog post or a specific page.

To customize OceanWP’s breadcrumbs, you’ll need to add parameters to the shortcode. You can change the default color and the hover color like so:

[oceanwp_breadcrumb color="#ff0000" hovor_color="#00ff00"]

Of course, you’ll need to look up the color codes to fit the theme of your website.

Enable Breadcrumbs with a Plugin

If your theme doesn’t support breadcrumbs out of the box, don’t fret—you can still enable breadcrumbs through a plugin, and you may already have one of the plugins with which you’re able to do so.

1. Yoast SEO

The popular SEO plugin, Yoast, helps users optimize their website and content for maximum search engine visibility and rankings. And since a website’s user experience is tied to its search rankings, one of the features Yoast has is breadcrumb navigation.

That said, you’ll need to enable Yoast’s breadcrumbs by adding a code snippet to your website’s theme files. If you’re nervous about editing your website’s code, make sure to take a valid backup of your website before doing so.

To enable breadcrumbs in Yoast, you’ll need to navigate to Appearance and then Theme Editor in your WordPress dashboard. Once the editor is open, click to access your Theme Header file.

Scroll to the bottom of your theme header file and paste the follow code into it:

<?php  if ( function_exists('yoast_breadcrumb') ) {    yoast_breadcrumb( '<p id="breadcrumbs">', '</p>' );  }  ?>

Once the code is added, save the file and refresh the page. Navigate to SEO and then Search Appearance and click on the Breadcrumbs tab. You’ll now be able to turn on breadcrumbs for your entire website.

2. WooCommerce Breadcrumbs

For those using WooCommerce to run an online store, the WooCommerce Breadcrumbs plugin is the easiest way to enable breadcrumbs for your website.

Enabling breadcrumbs is as easy as installing the plugin. Once it’s installed, simply navigate to Settings and then WC Breadcrumbs in your WordPress dashboard. Check the box to enable them, and you’re good to go. You can, of course, utilize the other settings to customize how your breadcrumbs are displayed.

3. Breadcrumb

If you aren’t running a WooCommerce site, or you simply want more control and options over how your breadcrumbs look and function, Breadcrumb is an excellent option.

Once installed, you’ll have a Breadcrumb section in your WordPress dashboard where you can choose from a plethora of options to customize your new navigation.

To enable breadcrumbs, you’ll need to add the shortcode to the areas of your site where you’d like to use them. The shortcode is simply [breadcrumbs] and you’ll add it to any text box or page where you want your breadcrumbs to be displayed. You can also get a snippet of code, which you can place in your theme files.

Enable Breadcrumbs Manually (For Advanced Users)

Enabling breadcrumbs manually requires coding knowledge. You’ll need to be familiar, at the very least, with HTML and CSS. That said, if your website is running a custom WordPress theme, it may be the best way to go about it. Just be sure you have a good backup of your website before you start hacking away at your theme files.

Manually enabling breadcrumbs in WordPress requires that you add code to two files in your theme. Both can be accessed by going to Appearance and then Theme Editor.

The first file you’ll need to edit is your functions.php file. In this, you’ll need to add a custom function for enabling breadcrumbs:

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>";  	}  }

Once you’ve added the code to your functions.php file, save it and then open up your header.php file. In this file, you’ll want to place the following code in an area that makes sense with the layout and design of your website:

<div class="breadcrumb"><?php get_breadcrumb(); ?></div>

This code block will place the actual breadcrumbs on your website. But you aren’t finished yet! If you want your breadcrumbs to match the look and style of your theme, you’ll need to add some custom CSS.

To achieve this, go to the Appearance and then Customize from your WordPress dashboard. Then click on Additional CSS. Here, you can add your custom CSS to change your breadcrumb’s appearance. Here’s some example code:

.breadcrumb {  	padding: 15px 5px;  	list-style: none;  	background-color: gray;  }

Of course, it’ll take some tweaking to get the breadcrumbs to match the theme of the rest of your website, but adding breadcrumbs manually will give you the most control over how your breadcrumbs look and function.

Happy Breadcrumb Trails

Usability is the single most important aspect of your website. If your visitors can’t use your website efficiently, they aren’t going to bother. Of course, breadcrumbs aren’t going to make it or break it for you, but if they make your WordPress website just a little easier to use, that’s a big bonus for your visitors and your rankings, not to mention for you and your business.