Add breadcrumb navigation without a plugin

For one of the websites we have in development we needed to add a breadcrumb navigation.

Now of course there are plenty of plugins around, a search on WordPress results in 2 pages of them.

breadcrumbs, courtesy of http://judicialpeach.com/2009/03/29/bread-crumbs/We however like to code things with as little plugins as possible (and necessary). It saves you time when the plugin developer decides to update the plugin and it protects you from when the developer decides to no longer support the development of the plugin.

On FWebDe we found one way of doing it. The article gives you the code to drop in your header template. Then with a bit of styling you can make the breadcrumb trail to fit your current theme.

The code creates an unordered list, with links to ancestors for pages, and to the category, for posts. Because posts with multiple categories will not work well with a linear-style breadcrumb, this will only display the first category that the post is in.

If you don’t like to mess up your header template too much, then there is also another way. Sarah from Stuff By Sarah wrote an article on BloggingTips that explains it all.

By adding the above function to your functions template, you only have to add the lines below in your header template and then you can style your breadcrumb trail further with CSS.
<?php if (function_exists('write_breadcrumb')) {
echo '<div class="breadcrumb">';
echo write_breadcrumb();
echo '</div><!-- .breadcrumb -->';
} ?>

Much cleaner indeed!

Well these are two WordPress Tips that might come in handy and if you don’t like to get your hands dirty, you can always use a plugin to do the trick!

What do you use when you need breadcrumb navigation?

Back to Top

7 thoughts on “Add breadcrumb navigation without a plugin

  1. Nice code, one thing though, how do you get the page they are on to show up on the BCT also without hyperlink. Thanks John.

    • Thanks for your comment @John, with the code above the page you are on does not have a hyperlink. The output basically is something like:
      Home (with link) » Page (with link) » child-Page (no link)

  2. Pingback: WordPress Breadcrumb mit Rich Snippet » miZine