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
or
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.
- make sure you have Wordpress and Thesis 1.5 or higher installed.
- make sure you have the plugins Thesis OpenHook and Breadcrumb-navxt installed.
- 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.
- In the Wordpress Admin section open Appearance Panel>Thesis OpenHook.
- 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.
- Paste the code in the installation section here
- Checkmark “Execute Php on this Hook”
- Click the blue “Little Ass Save Button” below it.
- Preview the site, you should see it below the Title.
- 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
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.




{ 1 trackback }
{ 2 comments… read them below or add one }
If you want the breadcrumb trail to look like the image above, then you may find the following useful: http://mtekk.weblogs.us/archives/guides/quick-and-easy-apple-com-style-breadcrumb-trail-for-wordpress/
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.