Breadcrumbs typically appear horizontally across the top of a web page, usually below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one.
Breadcrumbs provide a trail for the user to follow back to the starting or entry point. A greater-than sign (>) often serves as a hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical treatments.
Typical breadcrumbs look like this:
Home page > Section page > Subsection page or Home page >> Section page >> Subsection page
Breadcrumbs are a very common feature to help users identify where they are on a website. For some reason, WordPress out of the box doesn’t have any built-in methods for dynamically creating this common design pattern. Fortunately, Mtekk and Hakre decided to take matters into their own hands and created the Breadcrumb NavXT WordPress plugin. This plugin creates a new PHP function to include in your posts and pages templates that generate a dynamic Breadcrumb.
You will find a slew of configuration options that allow you to control how your blog’s breadcrumbs will render. However, you might also notice that even once you installed the plugin, your blog still doesn’t have a breadcrumb! Don’t fret, this plugin requires you to add some code manually to your theme’s template files.
Inserting the Breadcrumb
The reason this plugin got the geek rating of Webmaster is specifically due to the fact that to leverage this plugin, you must edit your theme. Luckily, the process is fairly painless.
- Visit Appearance | Editor and select either Single Post or Page Template from the list of available theme files.
- Locate the top of your post’s content within the page’s HTML. This area is often located right above the code <?php while (have_posts() : the_post(); $count++; ?>.
- Insert the Basic Breadcrumb snippet of code at the top of the page.
Basic Breadcrumb
<div>
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}
?>
</div>
