Breadcrumbs Usage for WordPress

by Vipe Team in WordPress Development; Published on 20.05.2020

READING TIME: MIN

There are multiple ways to navigate your website, and while your website’s main menu acts as the backbone of that system – guiding users to content – it can’t tell your visitors where they currently are within your website.

The breadcrumb menu steps in to fix exactly this. Using breadcrumbs, like literal breadcrumbs from the fairy tale, your users can find their way back to the main page, or any other place within your website as they may please.

So, What Are Breadcrumbs and How Are They Helpful?

Basically, we’re talking of just a hierarchical menu that looks a lot like a Sitemap. This leaves a ‘trail’ of links that can be followed back to the beginning of the navigation that the user has undertaken.

Most of your visitors are not going to land on your homepage, especially if they found their way to via external links or search engines. That’s another benefit to a breadcrumb menu – it helps search engines get your website structure and hierarchy better. This, of course, means better SEO and more
visitors.

Since the breadcrumb menu improves your UX significantly, it also helps reduce bounce rates – so those additional visitors will also stay longer.

Adding Breadcrumbs to WordPress

Like with anything WordPress, the way to add Breadcrumbs diverges in two paths – The easy one, i.e. use a plugin, or the manual way, where you can code breadcrumbs into header.php. Let’s look at both:

Add Premium Photos from within WordPress

Add Breadcrumbs to WordPress with a Plugin

There’s a bunch of plugins out there, all quite good. We, however, recommend Yoast SEO for the simple reason that it’s common enough that you already have it installed, and it doesn’t count as a new plugin you need to install. Follow these steps to get set up with your new breadcrumbs menu:

Download the plugin

As an SEO-focused plugin, Yoast will offer a lot of customizability – including formatting and styling your breadcrumbs. Download Yoast from the Plugin Directory. Once installed, activate it. So far, so routine.

Insert a function into header.php

Go to ‘Appearance’, select ‘Theme Editor’, find the header.php file and open it. Next, add the below code at whatever position you’d like your breadcrumbs.

It’s advisable, of course, to insert this snippet at the end of the file, though you can feel free to switch it around and see how that affects the end result. You can even insert the code in the theme’s page.php or single.php files instead, depending on what location you favour for the breadcrumb menu.

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

Enable Breadcrumbs

Within Yoast, locate SEO, then Appearance, and finally Breadcrumbs. Toggle it to ‘Enabled’, and we’re done here.

Add Your Breadcrumbs Manually with a Code

Opt for this if you don’t want to use a plugin or if you don’t have any need for Yoast per se. Read on to get started:

Refutation Of The WordPress Myths

Build A ‘Skeleton’ Function

Coding a PHP function is the manual way of adding breadcrumbs, and we begin this process by making a ‘skeleton function’. Give it a unique name, so as to avoid function conflicts.

<?php
function crumbs_of_bread()
{
/* Insert Breadcrumb menu code here */
}
?>

This is the skeleton we talked about, and all the code you add will be between the curly brackets {}.

Insert Ground Rules

Next up, we have to add rules in the function, within the breadcrumb section. The variables in the rules ensure that they can all be changed if you wish to later.

<?php
$show_on_homepage = 0;
$show_current = 1;
$delimiter = '&raquo;';
$home_url = 'Home';
$before_wrap = '<span clas="current">';
$after_wrap = '</span>';
global $post;
$home_url = get_bloginfo( 'url' );

Insert an ‘if else’ statement

Adding this statement below the variables will check if the visitor is on the homepage, and use that to determine whether the breadcrumbs are displayed. This ensures breadcrumbs will always appear when you want them to.

<?php
if ( is_home() || is_front_page() ) {
  /* ustawienie zmiennej/flagi gdy strona to strona główna */
  $on_homepage = 1;
}
if ( 0 === $show_on_homepage && 1 === $on_homepage ) return;
 
$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>';
 
$breadcrumbs .= '</ol>';
echo $breadcrumbs;

Insert Function in header.php

Locate the header.php file as before, and append the function to the end of it.

The Importance of WordPress Maintenance

Save, publish and you can now see your breadcrumbs menu on the webpage.