Add Breadcrumb Navigation to Any WordPress Theme — Without a Plugin!

November 26, 2009, in WordPress, by Eric Bannatyne.

On sites containing many pages, with many sub-pages, organized into many categories, navigation can sometimes be a real hassle. Sites with many different levels of depth often use breadcrumbs to help improve navigation.

An example of a WordPress-based site making good use of breadcrumbs is Nettuts. It is nice and simple, and doesn't get in the user's way.

Nettuts breadcrumbs

With WordPress being such a commonly used CMS, there will of course be plugins to do this, such as BreadCrumb NavXT. While these will usually be a good solution, what if you want to use a simpler method, without relying on a plugin, or you would like to distribute a theme with breadcrumbs?

First, open up the file in your theme where you would like the breadcrumb to go. I would suggest header.php because the header is where breadcrumbs usually go, and because this makes it easy to apply to individual posts and pages, as well.

<?php // Breadcrumb navigation
    if (is_page() && !is_front_page() || is_single() || is_category()) {
        echo '<ul class="breadcrumbs">';
        echo '<li class="front_page"><a href="'.get_bloginfo('url').'">'.get_bloginfo('name').'</a></li>';
 
        if (is_page()) {
            $ancestors = get_post_ancestors($post);
 
            if ($ancestors) {
                $ancestors = array_reverse($ancestors);
 
                foreach ($ancestors as $crumb) {
                    echo '<li><a href="'.get_permalink($crumb).'">'.get_the_title($crumb).'</a></li>';
                }
            }
        }
 
        if (is_single()) {
            $category = get_the_category();
            echo '<li><a href="'.get_category_link($category[0]->cat_ID).'">'.$category[0]->cat_name.'</a></li>';
        }
 
        if (is_category()) {
            $category = get_the_category();
            echo '<li>'.$category[0]->cat_name.'</li>';
        }
 
        // Current page
        if (is_page() || is_single()) {
            echo '<li class="current">'.get_the_title().'</li>';
        }
        echo '</ul>';
    } elseif (is_front_page()) {
        // Front page
        echo '<ul class="breadcrumbs">';
        echo '<li class="front_page"><a href="'.get_bloginfo('url').'">'.get_bloginfo('name').'</a></li>';
        echo '<li class="current">Home Page</li>';
        echo '</ul>';
    }
?>

What this code does, is it create 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.

Styling your breadcrumbs

So far we have our breadcrumb working, but it doesn't look like a breadcrumb. We will be doing some styling with CSS.

First, we will make the list display horizontally, with a bit of spacing in between each one.

.breadcrumbs li {
    list-style-type: none;
 
    float: left;
    margin: 0 0.5em 0 0;
}

Next, we can add in a character to separate each item of the list, using the :before pseudo-class.

.breadcrumbs li:before {
    content: "» ";
}

So far, it's looking pretty good, except for the separator at the beginning of the list. To get rid of that, we can simply apply content: none to the front page link.

.breadcrumbs .front_page:before {
    content: none;
}

Now that we pretty much have the basic structure and design of the breadcrumbs, you can go ahead and play with the CSS to see what you can get!

Here is a simple example of what I ended up with (Even my test site isn't that deep).

Breadcrumb example

Conclusion

Well, that's it. We now have some code that is ready to be used on any WordPress sites, especially on very large and complex sites.

If you have any questions, or if you have any ideas on how to improve on this, be sure to leave a comment!

Related Posts

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

26 Comments

  1. Justin Deleon
    November 27, 2009

    Wow! This is a very useful technique.

    Thanks for sharing!

  2. Lars-Eivind
    December 4, 2009

    It doesn't look right with my Atahualpa theme.
    The spacing IS displayed in front of the first menu item, and the breadcrumb trail is pushing the page title to the right.
    Any ideas?

  3. Eric Bannatyne
    December 4, 2009

    @Lars-Eivind:

    Try adding a div between the breadcrumb trail and the page title with the CSS clear: both;

    Hope that helps!

  4. Alen
    December 21, 2009

    Thanks for sharing this, man ! That BreadCrumb NavXT started to give me troubles after update WordPress ... This is the saviour !

  5. Eric Bannatyne
    December 21, 2009

    I'm glad that this helped you, Alen.

  6. Tony
    March 2, 2010

    Off-topic question...but what do you use to display code on this blog post?

    • Eric Bannatyne
      March 2, 2010

      I use the WP-Syntax plugin to display code blocks in my posts, with all the syntax highlighting you'll ever need! :)

      #include <iostream>
#include <string>
#include <stdlib.h>
 
using namespace std;
 
int main(int argc, char** argv) {
    string filePath = static_cast<string>(getenv("HOME")) + "/file.txt";
 
    cout << "That may not be the best way to do it, but look at the syntax highlighting! :)" << endl;
 
    // This is a comment.
    // But you already knew that, didn't you?
    int foo[10];
    int *bar = &foo[0];
 
    // Awesome stuff going on here...
    *(bar + 1) = 3;
 
    cout << *(bar + 1) << endl;
}
      • Tony
        March 3, 2010

        Good to know. :) I was trying out the Google Syntax highlighter, and it didn't come out looking right.

      • Tony
        March 3, 2010

        Tried it out. Looks great! Thanks again for the recommendation.

        • Eric Bannatyne
          March 3, 2010

          It's great to hear that this plugin worked out well for you!

  7. Pictrix
    May 20, 2010

    It works beautifully...but not in IE8.
    Instead of displaying:
    "Homepage > Subpage > Sub-subpage",
    it just displays:
    "Homepage Subpage Sub-subpage", without the " > " symbol. It seems that it doesn't understand the CSS for displaying the " > ".
    Is it possible to integrate these symbols to the PHP code?

    • Eric Bannatyne
      May 20, 2010

      I was not aware of that. But yeah, you can easily integrate them right into the PHP code. Just add it to the beginning of each <li> tag, and adjust the CSS if needed to make sure that it looks nice. Alternatively, you could also use it as a list bullet image, using CSS.

  8. Fro
    June 19, 2010

    Works great!

    Thank you for this. I was looking for a while for something like this.

  9. daniel
    July 8, 2010

    Thanks,

    works perfect. Was looking for a while for a code that would show the full path (including ancestor pages) in breadcrumb... This simply does the trick...

  10. Venkatesh
    July 30, 2010

    This code is not working....

    • Eric Bannatyne
      July 30, 2010

      You'll have to be more specific, everything works fine for me.

      What doesn't work? Does it not display everything? I haven't tested this in the latest versions of WordPress, so that could be the problem, but I somewhat doubt that.

      Perhaps it's incompatible with the theme you're using? You may have put it in a place that isn't displayed on the theme you're using.

  11. Lea
    November 28, 2010

    Hi Eric, thanks for this - it works perfectly. I've been trying to find a workaround to a plugin for some time, and yours is the first code I've come across that works so smoothly.

    I'm having a small problem that I'm hoping you can help me with - the site I'm using this on has a static front page (it's a custom part of the theme and isn't a standard post or page), and I don't want the breadcrumb appearing there. Is there any way to fix that?

    Thanks.

    • Eric Bannatyne
      November 28, 2010

      Well a quick way to handle it would be to create a separate template file called home.php, and not include the breadcrumb code in that file.

      Alternatively, you can wrap an if statement around the breadcrumb code, using is_front_page(), like so:

      < ?php if (is_front_page()): ?>
<!-- breadcrumb code here -->
< ?php endif; ?>
  12. Jon
    March 31, 2011

    Thanks for sharing this. What is the license for this?

    • Eric Bannatyne
      March 31, 2011

      The code's free to use or modify and distribute for anyone.

  13. Ted Piwowar
    August 18, 2011

    I'm using the code but am finding that when accessing the link from the menu, I get the homepage breadcrumb and current page, not this: home>category>sub-category

    How do i fix this?

  14. SpanishMaterials
    December 28, 2011

    Thank you for the code. I managed to enhance with breadcrumb one of my site with you code.

Trackbacks/Pingbacks