How to breadcrumb navigation with WordPress +Thesis Quickie

Renaming this series, if you can get it done in 5 minutes or less it’s a quickie.
Ever seen those links at the top of sites like:?

Home > Products > Hardware > Hammers

or

The Apple Store uses it...
The Apple Store uses it...

 

 

 

 

or

it's good enough for Richard Branson...
it's good enough for Billionaire Richard Branson...

Then you’ve seen what is called Breadcrumb Navigation (wiki).  It’s good for users, good for SEO and good for you and quick to get on your site. So why don’t you have it?

Bread Crumb navigation (sometimes wrongly called cooke crumb)  greatly reduces confusion in deeply nested pages or categories, both for end-users and search engine bots, and if you’ve got WordPress and Thesis it can be yours in less than 5 minutes. (you can probably do it without Thesis in the same time, you just have to be geekier)

How To add bread crumbs navigation in 10 steps.

  1. make sure you have WordPress and Thesis 1.5 or higher installed.
  2. make sure you have the plugins Thesis OpenHook and Breadcrumb-navxt installed.
  3. create a few pages, in the right side of each page, choose from the attributes panel what parent page you want, this will form the heirarchy for the trail.
  4. In the WordPress Admin section open  Appearance Panel>Thesis OpenHook.
  5. Take a look at this visual guide to which slot you want to place the bread crumb. I recommend the After Title hook, find the matching slot in ThesisOpenHook’s dropdown.
  6. Paste the code in the installation section here

    Using OpenHook to place Breadcrumb-navxt into the Thesis 1.6 hook
    Using OpenHook to place Breadcrumb-navxt into the Thesis After Title hook
  7. Checkmark “Execute Php on this Hook”
  8. Click the blue “Little Ass Save Button” below it.
  9. Preview the site, you should see it below the Title.
  10. Think about ways to clean up the hierarchy or style it better with CSS+graphics (which is how we got the breadcrumb above).

UPDATE The excellent developer of that breadcrumb plugin sent me to these pages, which cover how to do it (with graphics).  I turns out that the original of this style of graphics was Apple.com

http://mtekk.weblogs.us/archives/guides/quick-and-easy-apple-com-style-breadcrumb-trail-for-wordpress/

http://www.jankoatwarpspeed.com/post/2008/08/14/Create-applecom-like-breadcrumb-using-simple-CSS.aspx

There are several tweaks that have to happen to get the rich graphics and CSS to work with Thesis, which is what shows up above.   Once we figure out some compatibility issues with Thesis 1.6, I’ll look into making it available.

Be Sociable, Share!

11 thoughts on “How to breadcrumb navigation with WordPress +Thesis Quickie”

  1. Pingback: Wordpress Breadcrumb Nav Style
    1. Hey John,

      Thanks for the headsup, funny enough I just had put out a project to accomplish the same thing.

      I tried the code you provided and there is this weird positioning of the text that happens so we went a slightly different way, but it did come out great.

  2. Hi
    I think this is a while ago this was made but worth asking in case this is still monitored!

    I have followed the steps to get the visual style one but all I have is one grey bar along the screen. Using thesis. Any ideas why? Thanks

          1. I ended up just editing the functions-php file instead of using the after hooks plugin and that breadcrumbs plugin. Works just the same and I find that if you can do something without the need of a plugin then that should be the option used. Sure its easier using a plugin but all I did was copy the code from a tutorial anyway :)

            But that CSS for the apple thing just does a bar along the screen whatever I do.

            As the moment with the CSS for the breadcrumbs, all I have done is made a bigger font size, everytime I try adding those images to it I just get that bar along the screen with no options :(

  3. Not sure why the end part of my comment was missed off.

    Anyway, this css you have linked. It is just the top part of it that should be used?

    At the moment my CSS File looks like this:

    /*breadcrumbs*/
    #crumbs
    {
    font: 16px Arial, Helvetica, sans-serif;
    color:#720d04;
    }

    #crumbs a
    {

    color:#9b1405;
    }

    #crumbs a:hover
    {
    color:#720d04;
    }

    #crumbs a:selected
    {
    color:#720d04;
    }

  4. Thank you so much.I was looking for that last couple of weeks and finally I found what I needed. My only problem is that my text in breadcrumbs are so tiny. How can I make it bigger, please?

Leave a Reply