Creating breadcrumbs manually in WordPress is one of the cleanest ways to improve navigation and boost your SEO without depending on plugins. Breadcrumbs not only help users understand where they are on your website, but they also help Google crawl your structure more effectively. In this guide, we’ll walk through how to add breadcrumbs with Google Schema (and without it) using simple custom PHP code.
Breadcrumbs are a small but powerful navigation element that help users move around your site with ease. If you don’t want to install extra plugins just for breadcrumbs, you can add them yourself with a bit of code. This tutorial shows you exactly how to create custom breadcrumbs with Google Schema markup and also a version without Schema—both lightweight, fast, and easy to manage.
Breadcrumbs Code with Google Schema
If you want Google to fully understand your breadcrumb structure, Schema markup is important. Adding Schema makes it easier for search engines to show breadcrumb paths in search results, which improves visibility and click-through rate.
Below is a complete custom function that generates breadcrumbs for single posts. It includes a JSON-LD Schema for better SEO. Just copy it and paste it inside functions.php of your theme or child theme.
<?php
// Breadcrumb with Schema
function wprevise_the_breadcrumbs() {
if (!is_singular('post')) return;
$home_url = home_url();
$breadcrumb_schema = array(
'@context' => 'https://schema.org',
'@type' => 'BreadcrumbList',
'itemListElement' => array()
);
$position = 1;
// Home
$home_html = '<a href="' . esc_url($home_url) . '">Home</a>';
$breadcrumb_schema['itemListElement'][] = array(
'@type' => 'ListItem',
'position' => $position,
'name' => 'Home',
'item' => esc_url($home_url)
);
$position++;
$breadcrumb_content = $home_html;
// Category
$categories = get_the_category();
if (!empty($categories)) {
$category = $categories[0];
$cat_link = get_category_link($category->term_id);
$breadcrumb_content .= '<span class="separator"> / </span>';
$breadcrumb_content .= '<a href="' . esc_url($cat_link) . '">' . esc_html($category->name) . '</a>';
$breadcrumb_schema['itemListElement'][] = array(
'@type' => 'ListItem',
'position' => $position,
'name' => esc_html($category->name),
'item' => esc_url($cat_link)
);
$position++;
}
// Current Post
$breadcrumb_content .= '<span class="separator"> / </span>';
$breadcrumb_content .= '<span class="last">' . esc_html(get_the_title()) . '</span>';
$breadcrumb_schema['itemListElement'][] = array(
'@type' => 'ListItem',
'position' => $position,
'name' => esc_html(get_the_title()),
'item' => esc_url(get_permalink())
);
// Output HTML
echo '<nav aria-label="breadcrumbs" class="breadcrumb"><p>' . $breadcrumb_content . '</p></nav>';
// Output Schema
echo '<script type="application/ld+json">' . wp_json_encode($breadcrumb_schema) . '</script>';
}
?>
This code automatically prints structured breadcrumb navigation anywhere on your single post template. It includes Home → Category → Post Title, along with Google-friendly JSON-LD Schema output.
Breadcrumbs Code Without Schema
If you don’t need Schema markup, or you want a simpler breadcrumb system, you can use the non-schema version below. This version still displays the breadcrumb trail beautifully—but without the JSON-LD output.
<?php
// Breadcrumb without Schema
function wprevise_the_breadcrumbs() {
if (!is_singular('post')) return;
$home_url = home_url();
$position = 1;
// Home
$home_html = '<a href="' . esc_url($home_url) . '">Home</a>';
$breadcrumb_content = $home_html;
// Category
$categories = get_the_category();
if (!empty($categories)) {
$category = $categories[0];
$cat_link = get_category_link($category->term_id);
$breadcrumb_content .= '<span class="separator"> / </span>';
$breadcrumb_content .= '<a href="' . esc_url($cat_link) . '">' . esc_html($category->name) . '</a>';
}
// Current Post
$breadcrumb_content .= '<span class="separator"> / </span>';
$breadcrumb_content .= '<span class="last">' . esc_html(get_the_title()) . '</span>';
// Output HTML Only
echo '<nav aria-label="breadcrumbs" class="breadcrumb"><p>' . $breadcrumb_content . '</p></nav>';
}
?>
Both versions are clean, minimal, and plugin-free. You choose whichever fits your needs.
How to Display The Breadcrumbs
Once you have added the function to functions.php, you need to call it inside your theme files where you want breadcrumbs to appear—usually inside single.php right before the post title.
Use this line:
<?php if (function_exists('wprevise_the_breadcrumbs')) wprevise_the_breadcrumbs(); ?>Place it exactly where you want the breadcrumb to appear.
CSS Styling for Breadcrumbs
For styling, simply add the following CSS to your theme’s stylesheet or “Additional CSS” section inside the WordPress customizer.
/** BREADCRUMB **/
.breadcrumb p {background: transparent;margin: 0 0 15px 0;padding: 5px 0;display: flex;align-items: center;flex-wrap: wrap;gap: 5px;}
.breadcrumb a {position: relative;float: left;padding: 2px 10px;margin-right: 3px;line-height: 1.4;color: #8296a2;text-decoration: none;background-color: #fff;border-radius: 2px;border: 1px solid #dadada;transition: all 0.3s ease;font-size: 12px;}
.breadcrumb a:hover {color: #005898;cursor: pointer;background-color: #00589814;border: 1px solid #005898;}
.breadcrumb .last {position: relative;float: left;padding: 2px 10px;margin-right: 3px;line-height: 1.4;color: #ffffff;text-decoration: none;background-color: #252d40;border-radius: 2px;border: 1px solid #252d40;font-weight: 500;font-size: 12px;}
.breadcrumb .separator {color: #8296a2;margin: 0 2px;}
.breadcrumb p a:first-child {background: #005898;border: 1px solid #008cff;border-radius: 2px;color: #ffffff;}
.breadcrumb p a:first-child:hover {color: #005898;background-color: #00589814;border: 1px solid #005898;}
.breadcrumb p a:first-child:hover:before, .breadcrumb p a:not(:first-child):hover:before {color: #005898;}
@media screen and (max-width: 500px) {
.breadcrumb a {padding: 4px 8px;margin-right: 2px;font-size: 11px;}
.breadcrumb .last {padding: 4px 8px;margin-right: 2px;font-size: 11px;}
.breadcrumb .separator {margin: 0 1px;font-size: 10px;}
.breadcrumb p a:before, .breadcrumb .last:before {font-size: 10px;}
}
Demo
By adding a simple custom function, you can display elegant breadcrumbs on your WordPress site without using any plugin. Whether you choose the Schema version for better SEO or the simpler HTML-only version, both options keep your site lightweight and flexible. This method is perfect for developers, bloggers, or anyone who prefers full control over their website’s structure.
