How to Implement Breadcrumb Navigation in WordPress Without Plugins

Breadcrumb navigation is a useful tool that helps visitors to understand the structure of your website and easily find their way back to the homepage. In this tutorial, we will show you how to implement breadcrumb navigation in WordPress without using plugins.

Copy the Breadcrumb Navigation Code

The first step is to copy the following code and paste it in your theme’s functions.php file. This code creates a custom function that generates the breadcrumb navigation.

function the_breadcrumb() {
	global $post;
	if (!is_home()) {
		echo '<a href="' . site_url() . '">Home</a> / ';
		if (is_category() || is_single()) {
			the_category(' / ');
			if (is_single()) {
				echo " / ";
				the_title();
			}
		} elseif (is_page()) {
			if ($post->post_parent) {
				$anc = get_post_ancestors($post->ID);
				$title = get_the_title();
				foreach ($anc as $ancestor) {
					$output = '<a href="' . get_permalink($ancestor) . '" title="' . get_the_title($ancestor) . '">' . get_the_title($ancestor) . '</a> / ';
				}
				echo $output;
				echo $title;
			} else {
				echo '<strong> ' . get_the_title() . '</strong>';
			}
		}
	}
}

Call the Breadcrumb Navigation Function

The next step is to call the function in your theme’s template files. You can call the function in the header or footer, or anywhere you want to display the breadcrumb navigation.

<div class="breadcrumbs">
	<?php the_breadcrumb(); ?>
</div>

Style the Breadcrumb Navigation

Finally, you can style the breadcrumb navigation to match your website’s design. You can add the following CSS code to your theme’s stylesheet file.

.breadcrumbs {
    background-color: #f2f2f2;
    padding: 10px;
    font-size: 12px;
    text-align: center;
}
 
.breadcrumbs a {
    color: #666;
    text-decoration: none;
}
 
.breadcrumbs a:hover {
    color: #333;
}

With this simple code, you can easily implement breadcrumb navigation in your WordPress website without using plugins. This will help your visitors navigate your website and find what they are looking for more easily, leading to a better user experience. Additionally, adding breadcrumb navigation can also improve your website’s SEO by making it easier for search engines to understand the structure of your website.

Alternatively, you can use the_breadcrumb() as a WordPress shortcode to maunally add it to your pages. Add the following to your functions.php and use [custom_breadcrumb] as your shortcode to implement the breadcrumb navigation.

function fn_custom_breadcrumb( $atts ) {
	ob_start();
	?>
	<div class="breadcrumbs">
		<?php the_breadcrumb(); ?>
	</div>
	<?php
	return ob_get_clean();
}
add_shortcode( 'custom_breadcrumb', 'fn_custom_breadcrumb' );