Home / Blog / Tips / 2 Ways of Adding Breadcrumbs to WordPress Site

2 Ways of Adding Breadcrumbs to WordPress Site

The name Breadcrumbs is inspired by the Hansel and Gretel fairy tale. Hansel and Gretel are the two kids who drop a trail of breadcrumbs to trace their way back. Sounds interesting right? Adding breadcrumbs to your WordPress site is also interesting in the same way this story is.

In this article, we will look into what breadcrumbs are and how they benefit your website. Then, we’ll show you how to add them to your site. There’s a lot to cover, so let’s get started!

What Are Breadcrumbs?

As we told you before, the name Breadcrumbs is inspired by the story where two kids drop the breadcrumbs to form a trail back towards their house and follow the breadcrumbs to reach their home. Similarly, breadcrumb trails are navigational aids that help your visitors understand where they are on your WordPress website. They show the hierarchy of your web pages, and visitors can use them to navigate back to a previous page or to discover more relevant content.

 It also helps search engines understand the structure and hierarchy of links on a web page. Search engines like Google have started displaying breadcrumbs along with the page title in search results. This gives your website more visibility in the search results and increases your click-through rate.

What Are The Types of Breadcrumbs?

There are three different types of WordPress breadcrumbs. All incorporate navigational links as described above but in slightly different ways. Before adding these to your site, figure out which type will best fit your site.

1. Hierarchy-based

Hierarchy-based breadcrumbs show the user where they are in the website’s hierarchy. This is the most common type of breadcrumbs that tell users where they are in the site structure and how to get back to the homepage.  Meaning that no matter where you enter the site, you’ll always be able to find a way back home.

Example: Home > Blog > Category > Post name.

2. Attribute-based

Attribute-based breadcrumb trails display the attributes of a particular page. This type of breadcrumb is seen most commonly when a user has searched for something on an e-commerce site, the breadcrumb trail is made up of product attributes.

Example: Home > Product category > Gender > Size > Color.

3. History-based

History-based breadcrumbs are dynamic in that they display the pages the user has visited before arriving on the current page. It shows users the steps they’ve taken to arrive at a particular page. This is not a good SEO web design practice and it’s not used very often.

Example: Home > Previous page > Previous page > Previous page > Current page.

The Benefits of Adding Breadcrumbs to Your WordPress Site

There is a number of advantages to using breadcrumbs on your WordPress site. Let’s have a quick view of that;

Provide SEO Benefits:

Breadcrumbs help improve the search engine visibility of your website. Google uses breadcrumbs in the actual search results, which makes your website much more visible to users on the search engine. To increase the chances of its appearance on Google, you need to add structured data. They also give Google another way of figuring out how your website is structured.

Enhance The User Experience:

Breadcrumbs can help your user experience since they are a common interface element that instantly shows people a way out. They are used primarily to give users a secondary means of navigating a website. By offering a breadcrumb trail for all pages on a large multi-level website, users can navigate to higher-level categories more easily.

Lower Bounce Rates:

Breadcrumb trails can be a great way to entice first-time visitors to peruse a website after having viewed the landing page. If a user reaches a product page that they are not interested in, they will either bounce or go back to the category page to start over. Breadcrumbs encourage the user to start over and not bounce. This, in turn, reduces the overall website bounce rate.

Don’t Hog Screen Space:

Breadcrumbs don’t hog screen space because they are typed in a small plain font at the top of the page which means they take up little space on your site. The benefit is that they have little to no negative impact in terms of content overload, and they outweigh any negatives if used properly.

How to Add Breadcrumbs to a WordPress Site?

Breadcrumbs are an incredibly useful navigation element for both users and search engines. As WordPress is easily extensible, adding breadcrumbs to your site is also an easy task. With two methods you can add the Breadcrumbs feature in WordPress one is the plugin another is coding. The easiest method is to use a plugin, but you can also code into your site’s header.php file. 

Method 1: Add Breadcrumbs to WordPress Site With Yoast SEO Plugin

There are lots of plugins on the market, you can add breadcrumbs to the WordPress site. But Yoast SEO is the plugin, most of you might already use. That’s the reason we are showing how you can add breadcrumbs to your site with Yoast SEO.

If you are using the Yoast SEO plugin, you are a step ahead already. But if you are not using the plugin, Install and activate the Yoast SEO plugin first.

Next, we need to add a short snippet of code to your WordPress theme files. Copy and paste the following code into the theme where you want the breadcrumbs to appear.

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

You can place this code inside the single.php or page.php files, above the title of the page. Some themes want it at the end of the header.php file. It’s not a good idea to add it to functions.php.

After activating the plugin the SEO menu automatically appears in the admin menu bar. Now, Go to SEO >> Search Appearance >> Breadcrumbs.

Slide the “Disabled” button to the left side and, just like that, breadcrumbs are enabled. Once you are enabled, several options will appear to change how breadcrumbs would display on your site.

Once the changes have been done, scroll down and click on the Save button. Now you can check if it showing properly or not.

Method 2: Add Breadcrumbs to WordPress Site With Customized Coding

If you have a highly customized WordPress website you can add breadcrumbs manually to your site. But you require a bit of coding knowledge for that.

Firstly, you have to create your own ‘skeleton’ function to add breadcrumbs to WordPress manually. For that, you need to create a unique breadcrumb function. Make sure the skeleton function is unique otherways it may conflict with other functions.

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

Now, you need to add some ground rules in the mentioned 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. In this code, displaying breadcrumb on the homepage or not, it dictates the former. The last-mentioned determines whether the current page will be in the breadcrumbs list.

At this point, 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.

/* 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;

Once your function is complete, go to Appearance >> Theme Editor and add the function to the very end of the header.php file.

Breadcrumbs not only make your site easier for users but also boost your SEO. That’s why try to add this feature via this tutorial. Also, consider checking out our other articles on the site like How to add a modal popup login form and How to Increase Dwell Time.

** Feature image credit: Irene Georgiou