Breadcrumbs without Plugins

This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the Thesis Docs for current documentation.

Want to add breadcrumbs to your WordPress website in 2024? Check out the Breadcrumbs Box.

Breadcrumbs offer several benefits to a site. Done well, breadcrumbs improve the end-user experience, pageviews rise, and SEO rank flow is strengthened.

Adding a dynamic breadcrumb trail to your Thesis site takes just two simple steps:

Place this code in custom_functions.php:

function thesis_breadcrumbs() {
	echo '<a href="';
	echo get_option('home');
	echo '">';
	bloginfo('name');
	echo "</a>";
		if (is_category() || is_single()) {
			echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
			the_category(' &bull; ');
				if (is_single()) {
					echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; ";
					the_title();
				}
        } elseif (is_page()) {
            echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
            echo the_title();
		} elseif (is_search()) {
            echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;Search Results for... ";
			echo '"<em>';
			echo the_search_query();
			echo '</em>"';
        }
    }
function display_breadcrumbs() {
?><div class="breadcrumbs"><?php thesis_breadcrumbs(); ?></div><?php
	}

add_action('thesis_hook_after_header','display_breadcrumbs');

This function covers most of your bases, and begin with your site name. Single posts, pages, categories, and even search results are addressed.

Place this code in custom.css, and modify as needed:

.custom .breadcrumbs { 
	font-family:Verdana,Arial; 
	font-size:1.2em; 
	padding:1.2em 1em 1em 1em; 
	border-bottom:1px dotted #666; 
	border-top:1px dotted #666; 
}
.custom .breadcrumbs a { 
	color:#cc0000; 
	border-bottom:1px dotted #fff; 
}
.custom .breadcrumbs a:hover { 
	border-bottom:1px dotted #cc0000; 
}

The custom_functions.php and custom.css combine to appear similar to these reference images:

A category archive shows the name of the site, then the title of the category.

All single posts are shown as site in the format of their relationship to home, their category or categories, and the name of the post.

On single posts assigned to multiple categories, each category title is separated by a bullet point.

Individual WordPress pages show the site home name, then the title of the page.

Search results show as the site name, static text, and the search terms used.

Colors, font-families, positioning, and more can be adjusted in custom.css – but you can also experiment with different symbols (like the » shown above) using special character codes. Or use custom image-based separators for an even more unique look!

The hook of this function can be modified from thesis_hook_after_header, as used above, to different areas at your discretion.

For example, changing the hook to thesis_hook_after_content will display the bread crumb trail at the end of every post and category archive, including searches.