How to Add Breadcrumbs to Your WordPress Site

Navigation is a vital part of any website, and there is more than one way to provide it. The main menu on your website is the primary navigation tool that takes users to the content they want. However, it does not tell your customers where they currently are on your website.

A breadcrumb menu is a secondary navigation system that tells your customers where they are in relation to your home page. This helps them navigate through the pages of your website with ease, and avoid getting lost.

In this article, we will look into what breadcrumbs are and how they benefit your website. We’ll then show you how to add breadcrumbs to your WordPress website. Let’s get started!

What Are Breadcrumbs in WordPress?

Breadcrumbs is the term used to describe a hierarchical navigation menu. This kind of menu involves a trail of links, not unlike the breadcrumb trail left by Hansel and Gretel:

Since many users do not enter your WordPress site through the home page, breadcrumb navigation helps them understand where they have landed. Search engines also use breadcrumbs to better understand the hierarchy of your web pages.

Benefits of Adding Breadcrumbs in WordPress

Adding WordPress breadcrumb menus to your website offers several benefits. Google loves breadcrumbs, for example, so this feature can improve your Search Engine Optimization (SEO) and bring more visitors to your site. 

Breadcrumb menus can also reduce bounce rates, because they improve your site’s User Experience (UX). When users can navigate your website easily, they are more likely to spend time on it.   

How to Add Breadcrumbs in WordPress

You can add breadcrumbs to your WordPress website in two ways. The easiest method is to use a WordPress plugin, but you can also code breadcrumbs into your site’s header.php file. Before you use either method, you should create a backup of your website just in case something goes wrong.

Method 1: Using a WordPress Plugin to add Breadcrumbs

The easiest way to add breadcrumbs to WordPress is with a breadcrumb plugin. There are many plugins you can use, including Breadcrumb NavXT and Yoast SEO:

Yoast SEO is often the best option, because it’s likely a plugin that your website already uses.

Step 1: Download the Yoast SEO Plugin

Since Yoast is an SEO plugin, it offers a wide range of functionality. That includes the creation and styling of breadcrumb navigation.

To use this plugin, you will need to download it from the WordPress Plugin Directory. You can simply head to your site’s Plugins page, search for “Yoast SEO”, and install and activate the plugin like any other.

Step 2: Add a Function to Your header.php File

After the plugin is activated, you must add a function to your site’s header.php file. To access this file, navigate to Appearance > Theme Editor and select the file to open it. 

Then, add the following code wherever you’d like your breadcrumb setting menu to appear:

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

In general, you’ll want to place this code at the end of your header.php file. However, you can experiment with the menu’s placement, checking the front end of your site to see how the result looks.

You can even add the above function to your theme’s single.php or page.php file instead, if you want to enable breadcrumb function to appear elsewhere on the page. Just make sure you only add it in one place.

Step 3: Activate Breadcrumb Support

Finally, you will need to activate breadcrumb support. In Yoast SEO, this means navigating to SEO > Search Appearance > Breadcrumbs: 

Simply toggle the switch to “Enabled”, and you’re good to go! Your WordPress breadcrumb menu will be set up and ready to use.

Method 2: Coding Your Own Breadcrumbs in WordPress

Adding website breadcrumbs can also be done manually through coding. If you do not want to use a breadcrumb plugin, you can add breadcrumbs without one. Before you attempt this, you may want to read up on microdata, in order to fully leverage the SEO potential of WordPress breadcrumbs.

Step 1: Create a Skeleton Function

To add breadcrumbs to WordPress manually, you’ll need to create a PHP function. The first step in creating this function is to build the skeleton. Your skeleton function will need a unique name, to avoid conflicts with other functions.

function my_breadcrumbs() {
/* Breadcrumbs code will go here */
}

The above function is the skeleton, and the rest of the breadcrumbs code will be placed within the curly brackets.

Step 2: Add Ground Rules

After creating the skeleton, you’ll need to add rules to the function. The rules should be placed in the breadcrumb section:

/* Change according to your needs */
$show_on_homepage = 0;
$show_current = 1;
$delimiter = '»';
$home_url = 'Home';
$before_wrap = '<span clas="current">';
$after_wrap = '</span>';

/* Don't change values below */
global $post;
$home_url = get_bloginfo( 'url' );

The above rules generally use variables, so they can be changed later. The first two variables use booleans, where “0” is false and “1” is true.

Step 3: Add the ‘if else’ Statement

Below the variables, you need to add an ‘if else’ statement. This statement will check to see if a user is on your website’s home page or not. Based on this information, the statement will determine if the breadcrumbs are displayed or not:

/* Check for homepage first! */
if ( is_home() || is_front_page() ) {
$on_homepage = 1;
}
if ( 0 === $show_on_homepage && 1 === $on_homepage ) return;

/* Proceed with showing the breadcrumbs */
$breadcrumbs = '<ol id="crumbs" itemscope itemtype="http://schema.org/BreadcrumbList">';

$breadcrumbs .= '<li itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a target="_blank" href="' . $home_url . '">' . $home_url . '</a></li>';

/* Build breadcrumbs here */

$breadcrumbs .= '</ol>';
echo $breadcrumbs;

If this statement is not added to the function, the breadcrumbs settings may or may not appear when you want them to.

Step 4: Add Function to Theme Header

Once your breadcrumbs function is complete, you can add it to your website’s header.php file. Navigate to Appearance > Theme Editor to open the file, and add the function to the very end.

Then save your changes, and check out your new website breadcrumbs menu on the front end. You can continue to tweak the function and its placement until the menu looks just right (or disable breadcrumb when necessary).

Customize Your WordPress Site With WP Engine

Breadcrumb navigation menus help your site’s visitors find their way. They also make it easier for search engines to understand the hierarchy of your website. A plugin like Yoast SEO is the easiest way to add breadcrumbs to your website, but you can code them in manually as well. 

Using the right web host can help guarantee your website’s performance, leaving you with time to focus on development and UX. WP Engine can offer you the best WordPress hosting plans, and the best resources to create an incredible website experience!