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!

Tagged as: Appearance, Attributes, Bread Crumb, Bread Crumbs, Confusion, End Users, Hammers, Heirarchy, Hierarchy, Hook, Navigation, Nbsp, Open Appearance, Plugins, Quickie, Richard Branson, Search Engine Bots, Style Css, Thesis, Wiki

{ 10 comments… read them below or add one }

John Havlik November 10, 2009 at 5:08 pm

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/

TroyNotes November 11, 2009 at 2:50 pm

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.

Nick May 4, 2011 at 6:54 pm

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

TroyNotes May 4, 2011 at 7:06 pm

This site uses thesis 1.6, with wordpress 3.1.2 and works. Not sure maybe the newer version works differently?

Nick May 5, 2011 at 4:24 am

Hi

This is the page I have tested it on:

http://anfieldindex.com/lfc-store/test1/test2

In thesis I have just added the css into the custom css, is that the correct way of doing it?

The breadcrumbs work fine without these image things but they are in tiny text so not very usable really.

Thanks

TroyNotes May 5, 2011 at 5:08 am

I ended up putting mine into thesis’s own style.css eg.
http://www.troynotes.com/wp-content/themes/thesis_16/style.css?111109-205148

Nick May 7, 2011 at 6:57 am

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 :(

Nick May 7, 2011 at 7:00 am

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;
}

Evita March 27, 2012 at 2:11 am

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?

TroyNotes March 27, 2012 at 2:37 am

you need to find what css is being used in your menu and then just change it to a larger number. there are lots of guides on CSS on the web do a search “CSS font size”, or get someone on http://www.scriptlance.com to do it for you for $10 or so.

{ 1 trackback }

Previous post:

Next post: