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.

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!

Stay Updated

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

13 Comments

Justin Deleon

November 27, 2009

Wow! This is a very useful technique.

Thanks for sharing!

Reply
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?

Reply
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!

Reply
Alen

December 21, 2009

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

Reply
Eric Bannatyne

December 21, 2009

I'm glad that this helped you, Alen.

Reply

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.

Reply
Tony

March 3, 2010

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

Reply
- Eric Bannatyne
  
  March 3, 2010
  
  It's great to hear that this plugin worked out well for you!

FWebDe