How to Implement Breadcrumb Navigation in WordPress Without Plugins

Breadcrumb navigation is a valuable tool that enhances user experience by providing clear navigation paths and helping visitors understand the structure of a website. In this tutorial, we will show you how to implement breadcrumb navigation in WordPress without relying on plugins. By following these steps, you can improve your website’s navigation and provide an intuitive browsing experience for your visitors.

Before proceeding with any customizations in WordPress, it’s essential to set up a child theme. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. If you haven’t set up a child theme yet, follow this tutorial on How to Create a Child Theme for Customization. It will guide you through the process and ensure that your customizations remain intact even after theme updates.

Add the custom_breadcrumb() Function

To get started, locate and open the functions.php file of your WordPress child theme. Copy the following code snippet and paste it into your child theme’s functions.php file:

// Custom Breadcrumb Navigation Function
function custom_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>';
			}
		}
	}
}
Code language: PHP (php)

Explanation:

• We define the custom_breadcrumb function, which generates the breadcrumb navigation HTML markup based on the current page’s context.
• The function checks if the current page is not the homepage and outputs a link to the homepage followed by a separator.
• If the current page is a category archive or a single post, it displays the category links and the post title with appropriate separators.
• If the current page is a child page, it retrieves and displays the ancestors’ links in reverse order, followed by the current page’s title.

Display the Breadcrumb Navigation

To display the breadcrumb navigation on your WordPress website, you need to call the custom_breadcrumb function in your theme files. This can be done by adding the following code snippet to the desired location in your theme’s template files (e.g., header.php or footer.php):

<div class="breadcrumbs">
	<?php custom_breadcrumb(); ?>
</div>
Code language: PHP (php)

Style the Breadcrumb Navigation

To style the breadcrumb navigation, you can add the following CSS code to your child theme’s stylesheet:

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

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 custom_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 custom_breadcrumb_shortcode() {
	ob_start();
	?>
	<div class="breadcrumbs">
		<?php custom_breadcrumb(); ?>
	</div>
	<?php
	return ob_get_clean();
}
add_shortcode( 'custom_breadcrumb', 'custom_breadcrumb_shortcode' );
Code language: PHP (php)

That’s it! By following the steps outlined in this tutorial, you can easily add breadcrumb navigation to your WordPress website without using plugins. Breadcrumb navigation is a useful tool that can help your visitors understand the structure of your website and find their way back to the homepage. Additionally, it can improve your website’s SEO by making it easier for search engines to crawl and understand your website’s structure. Don’t forget to style your breadcrumb navigation to match your website’s design, and you can even use the shortcode function to add it to specific pages.