How to Add 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.

---

---

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.

---

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 = '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>';
    $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');

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

---

Breadcrumbs Schema without a Plugin

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 those tools

---