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' );

Support 🐶

If you found this article helpful, got a question or spotted an error/typo... Do well to leave your feedback in the comment section or help spread it by sharing this article. If you're feeling generous (and I hope you do) you can definitely help me by getting me a cup of coffee ☕.


You may like these too!

Leave a Reply

Your email address will not be published. Required fields are marked *