Breadcrumbs are such a standard design pattern these days I find it surprising there isn’t a build in WordPress function for displaying one. But no matter, that’s what plugins are for. A quick Google search brings up a couple. Yoast has one, so you know that one is pretty good. The other popular one is the NavXT plugin, which I actually used recently on a project and can fully vouch for it.

 

Like about any other plugin, it’s as simple as downloading, uploading to your plugins folder, and activating it from the back end. Once that is done, you now have a brand new function to use to display breadcrumbs! Like any custom function, you should first test if the function exists before using it. So this is the code you should use in your theme to display the breadcrumb:

<?php if(function_exists('bcn_display')) { bcn_display(); } ?>

Why do we do that if statement? Well what if someday you upgrade WordPress and this plugin isn’t compatible anymore. Or for some reason you shut if off thinking you don’t need it anymore. That would cause nasty errors that people could see on the front end of your site. This prevents that.

When Is This Useful?

It’s not every site that benefits from breadcrumbs. Most blogs don’t go very many levels deep. There are a variety of taxonomies and archive structures, but they are often one or two levels deep and don’t benefit much from being able to “back up” the structure.

Breacrumbs are most useful on sites that make heavy use of the Parent-Child relationship of Pages. This particular site had child pages up to 5 levels deep, and it was particularly useful to be able to back up one or two steps out of the hole. Breadcrumbs made perfect sense, and was able to fit into the design nicely.

Many Options

The beauty of this plugin is the slew of options available to customize how your breadcrumbs work. For example, uou can choose to link the “current” page item or not. I recommend not linking it, as it would link to the page you are viewing which is unnecessary and confusing. In fact, I took it step further in the above example and hid the current link by using the options to apply a span around the current link and hiding it with CSS.

You can also choose to show the “home” as part of the trail or not, what the separators are in between the links, and even truncate titles. They key to any great plugin is having as many options as you can without it being confusing or overkill. NavXT breadcrumbs definitely do it right.

Styling

The brilliance is that the entire design is created with a single graphic:

The breadcrumb train is literally just a bunch of anchor links in a row in the HTML. Each link can be padded up and this background image applied to create the entire effect:

.breadcrumb a { background: url(images/crumb-sep.gif) no-repeat right center; padding: 8px 15px 8px 5px; }

The trick is to align the background to the right and then center it vertically, showing the point in the middle. The “scalable” part comes in when the text is resized, the graphic is easily large enough to grow to fit. More padding is added on the right to accommodate the point and overall design.