How to Add Breadcrumbs and Breadcrumbs Schema without a plugin

In WordPress, breadcrumbs are a type of navigation element that helps users understand the structure of your website and their current location within it.

They are usually displayed as a series of links at the top of a page, separated by a delimiter such as a “>” symbol.

For example, if you have a website with a structure like “Home > Blog > Category > Post,” the breadcrumb trail for a particular post might look like this:

Home > Blog > Category > Post

Breadcrumbs provide a useful way for users to quickly navigate back to a higher level in the website hierarchy, and can also help search engines to understand the structure of your website and its content.

These are some code snippets to generate breadcrumbs and breadcrumbs schema without a SEO plugin.

Table of Contents

Why Not Use a SEO Plugin?
Should you Add Breadcrumbs to your Site?
Code to Generate Breadcrumbs Schema
CSS for Custom Breadcrumbs
Breadcrumbs Schema without a Plugin
Code Modifications #1

Why Not Use a SEO Plugin?

There are situations in which you probably want to code a simple plugin and not use a SEO plugin.

If you are like me, you only want to use plugins whose features are so complex to be replaced by simple code snippets.
You are sick and tired of SEO plugins that have a bunch of features you don’t really need.
You probably have a plugin but you are required to pay for a premium subscription if you need to add breadcrumbs and breadcrumb schema to your site.

Let’s take SEOPress as an example, if you need breadcrumbs or breadcrumbs schema, you need to pay $49 a year for that feature and other features you might or might not need.

Should you Add Breadcrumbs to your Site?

Since the Google Helpful Content Update, uncertainty about what to do has reigned.

Is adding breadcrumbs to your personal website a indication that you are doing way too much in terms of SEO?

I don’t really know and I am not sure if it is something that you should do for a small and simple sites with a structure such as:

Home >  Category > Post

If you are trying to de-optimize your site, adding breadcrumbs and breadcrumbs schema is a step in the opposite direction.

A category button is probably more than enough for small websites.

if you check Kinsta or Ahrefs Blogs, you can see that they have added a category button on top of the post title but there is no visible trace of breadcrumbs in their posts.

Kinsta Blog using Category Button and No breadcrumbs

In case that you still want to add breadcrumbs to your WordPress site, check the code snippets to get that feature without a plugin.

Code to Generate Breadcrumbs Schema

I use the mu-plugins folder to add code snippets to my site

This is my mu-plugin to create breadcrumbs

<?php
/*
Plugin Name: Breadcrumbs
Plugin URI: https://ticolibre.com
Description: Add breadcrumbs to posts and pages
Version: 1.0
Author: TicoLibre
Author URI: https://ticolibre.com
*/

/* Shortcode to display breadcrumbs. */

function custom_breadcrumbs_shortcode() {
    // Define the separator between breadcrumbs
    $separator = ' > ';

    // Get the current post/page ID
    $current_page_id = get_queried_object_id();

    // Start the breadcrumbs output
    $breadcrumbs = '<div class="breadcrumbs">';

    // Add an SVG icon for Home
    $home_svg_icon = '<img src="' . esc_url(home_url('/wp-content/uploads/svg/home.svg')) . '" alt="Home" style="width: 25px; height: 25px; filter: invert(1);margin-bottom: 10px; display: inline-block; vertical-align: middle;">';

    $breadcrumbs .= '<a href="' . esc_url(home_url()) . '">' . $home_svg_icon . '</a><span class="separator">' . $separator . '</span>';

    // Check if it's a single post
    if (is_single()) {
        // Get the post categories
        $categories = get_the_category();
        if ($categories) {
            foreach ($categories as $category) {
                $breadcrumbs .= '<a href="' . esc_url(get_category_link($category->term_id)) . '">' . esc_html($category->name) . '</a><span class="separator">' . $separator . '</span>';
            }
        }

        // Add the post title
        $breadcrumbs .= esc_html(get_the_title());
    } elseif (is_page()) {
        // Add the page title
        $breadcrumbs .= esc_html(get_the_title());
    }

    // End the breadcrumbs output
    $breadcrumbs .= '</div>';

    // Return the breadcrumbs
    return $breadcrumbs;
}

// Register the shortcode
add_shortcode('custom_breadcrumbs', 'custom_breadcrumbs_shortcode');

The output for such code will be the following on posts:

Home >  Category > Post_Title

and this will be the output for pages

Home > Page_Title

This won’t add the breadcrumbs to your post and pages automatically, you need to add them to your hero section using a shortcode

[custom_breadcrumbs]

Since I use GeneratePress and GenerateBlocks, I usually add the code to my hero section for all posts and pages

Keep in mind that you should upload your own svg icon to a folder called “svg”on your uploads folder:

If you use a different folder, change the path in the following line

$home_svg_icon = '<img src="' . esc_url(home_url('/wp-content/uploads/svg/home.svg'))

CSS for Custom Breadcrumbs

If you want to customize how breadcrumbs look, you should definitely add some CSS.

This is the CSS that works well with the previous code.

/* Custom Breadcrumbs Styling */
.breadcrumbs {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: -30px;
}
.breadcrumbs a {
    color: #ffffff;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs a svg {
    fill: #ffffff;
    margin-right: 5px;
}
.breadcrumbs span.separator {
    margin: 0 8px;
}

Breadcrumbs Schema without a Plugin

I am not sure if adding schema without adding the actual breadcrumbs is a good SEO practice but if I remember correctly, SEOPress has that feature.

This is my mu-plugin to generate the breadcrumbs schema

<?php

/*
  Plugin Name: Breadcrumbs Json
  Plugin URI: https://ticolibre.com
  Description: Add a JSON Data for Search Engines
  Version: 1.0
  Author: TicoLibre
  Author URI: https://ticolibre.com
*/

function get_breadcrumb_json_ld() {
  $home_url = get_home_url();
  $post_categories = get_the_category();
  $first_category = $post_categories[0];
  $category_url = get_category_link($first_category->term_id);
  $post_title = get_the_title();
  $post_url = get_the_permalink();

  $json_ld = array(
    '@context' => 'https://schema.org',
    '@type' => 'BreadcrumbList',
	'name' => 'Breadcrumb',
    'itemListElement' => array(
      array(
        '@type' => 'ListItem',
        'position' => 1,
		'name' => 'Home',
        'item' => array(
          '@id' => $home_url,
          
        ),
      ),
      array(
        '@type' => 'ListItem',
        'position' => 2,
		'name' => $first_category->name,
        'item' => array(
          '@id' => $category_url,
          
        ),
      ),
      array(
        '@type' => 'ListItem',
        'position' => 3,
		'name' => $post_title,
        'item' => array(
          '@id' => $post_url,
          
        ),
      ),
    ),
  );

  return json_encode($json_ld, JSON_UNESCAPED_SLASHES);
}

//Output JSON LD to the footer
function output_breadcrumb_json_ld() {
  if ( is_single() ) {
    $json_ld = get_breadcrumb_json_ld();
    echo '<script type="application/ld+json">' . $json_ld . '</script>';
  }
}
add_action('wp_footer', 'output_breadcrumb_json_ld');

I have tested the schema generated by the plugin using schema validators and the code generated pass the tests by both of those tools

Code Modifications #1

These are some modification made to the main code

Code to add Breadcrumbs to Posts only and not Post Title

This is the code to add breadcrumbs to post only and limit the breadcrumbs for posts to home>category and not home>category>post_title

?php
/*
Plugin Name: Breadcrumbs
Plugin URI: https://ticolibre.com
Description: Add breadcrumbs to posts and pages
Version: 1.0
Author: TicoLibre
Author URI: https://ticolibre.com
*/

/* Shortcode to display breadcrumbs. */

function custom_breadcrumbs_shortcode() {
    // Check if it's a single post
    if (!is_single()) {
        return ''; // If not a single post, return empty string
    }
    
    // Define the separator between breadcrumbs
    $separator = ' > ';

    // Start the breadcrumbs output
    $breadcrumbs = '<div class="breadcrumbs">';

    // Add an SVG icon for Home
    $home_svg_icon = '<img src="' . esc_url(home_url('/wp-content/uploads/svg/home.svg')) . '" alt="Home" style="width: 25px; height: 25px; filter: invert(1);margin-bottom: 10px; display: inline-block; vertical-align: middle;">';

    $breadcrumbs .= '<a href="' . esc_url(home_url()) . '">' . $home_svg_icon . '</a><span class="separator">' . $separator . '</span>';

    // Get the post categories
    $categories = get_the_category();
    if ($categories) {
        $category = reset($categories); // Get the first category
        $breadcrumbs .= '<a href="' . esc_url(get_category_link($category->term_id)) . '">' . esc_html($category->name) . '</a>';
    }

    // End the breadcrumbs output
    $breadcrumbs .= '</div>';

    // Return the breadcrumbs
    return $breadcrumbs;
}


// Register the shortcode
add_shortcode('custom_breadcrumbs', 'custom_breadcrumbs_shortcode');