How to Add Breadcrumbs Without Plugin and Best Practice

Breadcrumb is a navigation aid used in user interfaces. It gives users a way to keep track of their locations. On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages.

pic1apple

Why use breadcrumb?

Here are just some of the benefits of using a breadcrumb trail.

Convenient for users
Breadcrumbs are used primarily to give users a secondary means of navigating a website. By offering a breadcrumb trail for all pages on a large multi-level website, users can navigate to higher-level categories more easily.

Reduces clicks or actions to return to higher-level pages
Instead of using the browser’s “Back” button or the website’s primary navigation to return to a higher-level page, users can now use the breadcrumbs with a fewer number of clicks.

Doesn’t usually hog screen space
Because they’re typically horizontally oriented and plainly styled, breadcrumb trails don’t take up a lot of space on the page. The benefit is that they have little to no negative impact in terms of content overload, and they outweigh any negatives if used properly.

Reduces bounce rates
Breadcrumb trails can be a great way to entice first-time visitors to peruse a website after having viewed the landing page. For example, say a user arrives on a page through a Google search, seeing a breadcrumb trail may tempt that user to click to higher-level pages to view related topics of interests. This, in turn, reduces the overall website bounce rate.

This sub article is from SmashingMagazine

When we don’t need to use the breadcrumb

A common mistake in implementing breadcrumbs is using them when there is no benefit.

pic2mistake

In the above example. The (1) primary navigation, (2) breadcrumb trail and (3) secondary navigation are very close together. The breadcrumb trail in this application offers users no added convenience because the secondary navigation for lower-level pages sits right below it. Additionally, clicking on the second-level link in the breadcrumb trail (”Music”) takes you back to the first tab (”Listen”), which mistakenly suggests that the first tab is on a higher level than the other two (”Search” and “Artist hall of fame”).

This sub article is from SmashingMagazine

Add breadcrumb

You can easily add them via several good plugins (ex. Yoast Breadcrumbs), but sometimes you want to build breadcrumbs into a theme without using a plugin.

Step :
1. Created a php file called breadcrumbs.php and inserted the following code…(update : Peb 24, 2010)

/*Breadcrumbs*/
<?php
function the_breadcrumb() {
     echo 'You are here: ';
     if (!is_home()) {
         echo '<a href="';
         echo get_option('home');
         echo '">';
         echo 'Home';
         echo "</a> &raquo; ";
         if (is_category() || is_single()) {
            if (is_single()) {
               echo the_title();
            }
         } elseif (is_page()) {
            echo the_title();
         }
         elseif (is_tag()) {
            single_tag_title();
         }
         elseif (is_day()) {
            echo "Archive for "; the_time('F jS, Y');
         }
         elseif (is_month()) {
            echo "Archive for "; the_time('F, Y');
         }
         elseif (is_year()) {
            echo "Archive for "; the_time('Y');
         }
         elseif (is_author()) {
            echo "Author Archive";
         }
         elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {
            echo "Blog Archives";
         }
         elseif (is_search()) {
            echo "Search Results";
         }
         elseif (is_404()) {
            echo "404 Error";
         }
     }else{
        echo '<a href="';
        echo get_option('home');
        echo '">';
        echo 'Home';
        echo "</a>";
     }
}
?>
/*End of Breadcrumbs*/

2. Add this line…whereever you want to include the breadcrumb in your website

 <?php the_breadcrumb(); ?>

This tutorial is from egracecreative forthelose (update : Peb 24, 2010)

Best Practice

This sub article is from webdesignpractices

Frequency of Breadcrumbs
45% of pages included breadcrumb navigation.
Breadcrumb navigation was expected to be a global characteristic—that is, a site would either provide breadcrumb navigation on its pages or not. However, breadcrumbs would occasionally be present on some, but not all, pages along the sample path. This inconsistency appeared to be due to incomplete updating of a site, some pages apparently having a more recent design than others.

Orientation of Breadcrumbs

pic3horizontal 95% Horizontal
pic4vertical 5% Vertical

Breadcrumb Separator (for Horizontal Breadcrumbs)

pic5rightarrow 65% Right Arrow
pic6pipe 9% Pipe
pic7colon 8% Colon
pic8slash 4% Slash
pic9leftarrow 3% Left Arrow
pic10bullet 3% Bullet
pic11text 3% Text Treatment

18 Comments to “How to Add Breadcrumbs Without Plugin and Best Practice”

Add Comments (+)

  1. Wei Mcloone says:

    Hi – just a brief note to say thanks for this article. Very informative.

  2. Gene Aquirre says:

    Hi how are you i really liked this.

  3. Excellent site and I am really pleased to see you have what I am actually looking for here and this this post is exactly what I am interested in. It

  4. I love your blog posts. Keep me posted

  5. Alice Watch says:

    Thanks for putting this up. I searched on how to make good comments and after not getting much I found this which I learned about how a profile can make an impression.

  6. Thanks for putting this up. I searched on how to make watch good comments and after not getting much I found this which I learned about how a profile can make an impression.

  7. money says:

    Wasn’t sure where to post this but I would like to add your site to one of my web directories. Please contact me at your convience because I only list sites with the webmasters consent – thank you.

  8. Sharen Puzo says:

    have been reading ur website around several days. really like your posts. by the way i am conducting a study about this topic. do you know any other sites or maybe forums in which I might get more? thanks a lot.

  9. cepris says:

    Useful tutorial, thanks!

  10. Matt says:

    Thanks for that Eko – was very helpful!

  11. DG says:

    Nice blog tutorial, GBU…

  12. Anja says:

    I created the breadcrumbs.php and added the code snipped to page.php and single.php just after . But when I check the website the page are broken. Basically all content disappeared and the page is cut off right after the title. I have tried placing the code snipped in different places, but no matter what I do, it breaks the page.

    I have checked the code to make sure it’s exactly like displayed here and I can’t find any errors.

    Any ideas why this code would make a web page break?

  13. Thanks for the tip, will definitely add it to my arsenal of WordPress Code Snippets.

Trackbacks/Pingbacks

  1. How to style a breadcrumb like apple.com style breadcrumb in wordpress | DynamicWP
  2. Sandro Forbice » The Ultimate 20 Usability Tips for Your Website
  3. The Ultimate 20 Usability Tips for Your Website « Web Design News
  4. PK Media - The Ultimate 20 Usability Tips for Your Website

Leave a Reply

 

Amazingly Beautiful WordPress Themes