Custom Breadcrumbs for a WordPress Theme

Posted on | by admin
Creating custom breadcrumbs for a WordPress theme involves a few steps. Breadcrumbs are a navigational aid that helps users understand their current position within a website’s hierarchy without having to check the URL structure. To add custom breadcrumbs, you’ll need to write some PHP code and add it to your theme’s ‘functions.php’ file, or create a custom plugin.
Here’s a simple example of how you could implement custom breadcrumbs:


function my_custom_breadcrumbs() {

	// Do not display on the homepage

	if (is_front_page()) {

		return;

	}

	// Define your breadcrumb separator

	$separator = ' > ';

	// Initialize the breadcrumb trail

	echo '

	<nav aria-label="breadcrumb">

		<ol class="breadcrumb">

			<li style="list-style-type: none;">

				<ol class="breadcrumb">';</ol>

			</li>

		</ol>

		// Start with a link to home page

		echo '

		<ol class="breadcrumb">

			<li style="list-style-type: none;">

				<ol class="breadcrumb">

					<li class="breadcrumb-item"><a href="' . home_url() . '">Home</a></li>

				</ol>

			</li>

		</ol>

		';

		if (is_category() || is_single()) {

			// If the post has a category

			the_category($separator);


			if (is_single()) {

				// For single posts, show the title

				echo '

				<ol class="breadcrumb">

					<li style="list-style-type: none;">

						<ol class="breadcrumb">

							<li class="breadcrumb-item active" aria-current="page">' . get_the_title() . '</li>

						</ol>

					</li>

				</ol>

				';

			}

		} elseif (is_page()) {

			// If WordPress has parent pages, we get them

			$parent_id = wp_get_post_parent_id(get_the_ID());

			if ($parent_id) {

				// Get all parents

				$parents = get_post_ancestors(get_the_ID());

				// Sort parents into the right order

				foreach (array_reverse($parents) as $parent) {

					echo '

					<ol class="breadcrumb">

						<li style="list-style-type: none;">

							<ol class="breadcrumb">

								<li class="breadcrumb-item"><a href="' . get_permalink($parent) . '">' . get_the_title($parent) . '</a></li>

							</ol>

						</li>

					</ol>

					';

				}

			}

			// Current page

			echo '

			<ol class="breadcrumb">

				<li style="list-style-type: none;">

					<ol class="breadcrumb">

						<li class="breadcrumb-item active" aria-current="page">' . get_the_title() . '</li>

					</ol>

				</li>

			</ol>

			';

		} elseif (is_tag()) {

			echo '

			<ol class="breadcrumb">

				<li style="list-style-type: none;">

					<ol class="breadcrumb">

						<li class="breadcrumb-item active" aria-current="page">Tag: ' . single_tag_title('', false) . '</li>

					</ol>

				</li>

			</ol>

			';

		} elseif (is_day()) {

			echo '

			<ol class="breadcrumb">

				<li style="list-style-type: none;">

					<ol class="breadcrumb">

						<li class="breadcrumb-item active" aria-current="page">Archives for ' . get_the_date() . '</li>

					</ol>

				</li>

			</ol>

			';

		} elseif (is_month()) {

			echo '

			<ol class="breadcrumb">

				<li style="list-style-type: none;">

					<ol class="breadcrumb">

						<li class="breadcrumb-item active" aria-current="page">Archives for ' . get_the_date('F Y') . '</li>

					</ol>

				</li>

			</ol>

			';

		} elseif (is_year()) {

			echo '

			<ol class="breadcrumb">

				<li style="list-style-type: none;">

					<ol class="breadcrumb">

						<li class="breadcrumb-item active" aria-current="page">Archives for ' . get_the_date('Y') . '</li>

					</ol>

				</li>

			</ol>

			';

		} elseif (is_author()) {

			echo '

			<ol class="breadcrumb">

				<li style="list-style-type: none;">

					<ol class="breadcrumb">

						<li class="breadcrumb-item active" aria-current="page">Author: ' . get_the_author() . '</li>

					</ol>

				</li>

			</ol>

			';

		} elseif (is_search()) {

			echo '

			<ol class="breadcrumb">

				<li style="list-style-type: none;">

					<ol class="breadcrumb">

						<li class="breadcrumb-item active" aria-current="page">Search results for: ' . get_search_query() . '</li>

					</ol>

				</li>

			</ol>

			';

		} elseif (is_404()) {

			echo '

			<ol class="breadcrumb">

				<li style="list-style-type: none;">

					<ol class="breadcrumb">

						<li class="breadcrumb-item active" aria-current="page">404 Not Found</li>

					</ol>

				</li>

			</ol>

			';

		}

		echo '

	</nav>';

}
To display this breadcrumb trail within your theme, you’ll want to call this function in the appropriate place, usually somewhere within your ‘header.php’, ‘page.php’, or ‘single.php’ templates, like so:


<?php my_custom_breadcrumbs(); ?>
Remember to style your breadcrumbs with CSS to match your theme’s look and feel. Also, be aware that this is a very basic example. Depending on your theme’s structure and the complexity of your site (e.g., custom post types, taxonomies, etc.), you may need to extend this functionality further.
If you prefer not to write the code yourself, you can also use plugins like Yoast SEO or Breadcrumb NavXT, which provide breadcrumb functionality and can be integrated into your theme with a simple function call.
97 views | 2 |