Online Tips for Web Developer/Designer

• Tweet
• Share

• Tweet
• Share

For the past years, the word “breadcrumb” are very popular in modern web design/development. Most of the template / theme provider or developer will add this feature in their package. So if you are new to the web, simply breadcrumbs or breadcrumb trail is a navigation tools that help user to know which section they are in. An UI (user interfaces) for user to track their location within your blog so that they don’t get lost from hundred cats and million of post you got in your blog post ;P

In this article we are going to introduce Breadcrumb NavXT

Breadcrumb NavXT - Download
Authors: mtekk, hakre

Breadcrumb NavXT, the successor to the popular WordPress plugin Breadcrumb Navigation XT, was written from the ground up to be better than its ancestor. This plugin generates locational breadcrumb trails for your WordPress blog. These breadcrumb trails are highly customizable to suit the needs of just about any blog. The Administrative interface makes setting options easy, while a direct class access is available for theme developers and more adventurous users. Do note that Breadcrumb NavXT requires PHP5.

Now how to Add Breadcrumbs to your WordPress

1. Download the latest vesion from wordpress – Download
   
2. Disable any previous version of this plugin or Breadcrumb Navigation XT.
3. Now you can install the plugin as follow.
   Backend > Plugins (left side) > Add New (left side) > Upload (locate on the right panel) > Activate Plugin (right panel)
4. Continue reading, or follow instructions given by your theme

Breadcrumb NavXT basic usage (or you can visit the author project page)

Depending on your theme this section may be unnecessary. If you are using berry as your theme everything is done for you so you have no further steps to take. If you are a theme developer visit the documentation for examples on how to directly access the bcn_breadcrumb_trail class. Otherwise keep reading.

Open the appropriate file for your theme (typically header.php or index.php). This can be done within WordPress’ administration panel through Presentation > Theme Editor or through your favorite text editor. Place the following code where you want the breadcrumb trail to appear.

If you want this to show in everywhere on your wordpress, best place is to place it on the header.php

Save the file (upload if applicable). Now you should have a breadcrumb trail on your WordPress powered site. To customize the breadcrumb trail you may edit the default values for the options in the administrative interface. This is located in your administration panel under Settings > Breadcrumb NavXT.

html/CSS breadcrumb for your wordpress

This is just a css reference for you to use, of course you can change to anything you like.
Maybe different color, fonts, background, image and etc.

PHP

    <div class="breadcrumb">
    <?php
    if(function_exists('bcn_display'))
    {
        bcn_display();
    }
    ?>
    </div>

CSS

div.breadcrumb{ background:#f8f8f8; padding:10px 10px 10px 30px;}
.breadcrumb{font-size:10px;color:#b8b8b8;}
.breadcrumb a:link, .breadcrumb a:visited{color:#699eb6; text-decoration:none;}
.breadcrumb a:hover{color:#47798f; background:#FFC; text-decoration:underline;}

Advanced Usage

Examples on some advanced usage situations are available in the documentation.

Further Study about breadcrumb

If you would like to take a look at a more in-depth view of what and how breadcrumb are made for. Please take a look at the following post by smashingmagazine.