How to breadcrumb navigation with WordPress +Thesis Quickie

by TroyNotes on November 8, 2009

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!