How to Add Breadcrumbs Without Plugin and Best Practice

18th Dec 2009 | Posted by Eko S. | 22 Comments

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

	95% Horizontal
	5% Vertical

Breadcrumb Separator (for Horizontal Breadcrumbs)

	65% Right Arrow
	9% Pipe
	8% Colon
	4% Slash
	3% Left Arrow
	3% Bullet
	3% Text Treatment

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

Add Comments (+)

Wei Mcloone says:

January 24, 2010 at 22:46

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

Reply
- ekosetiawan says:
  
  January 25, 2010 at 01:36
  
  Hi thanks, nice to meet u
  
  Reply
Mohammad Bersaw says:

February 1, 2010 at 19:28

hi

Reply
Gene Aquirre says:

February 1, 2010 at 23:56

Hi how are you i really liked this.

Reply
- Eko S. says:
  
  February 2, 2010 at 00:00
  
  Hi, thanks
  
  Reply
Kindergartern Enrichment NJ says:

February 2, 2010 at 03:22

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

Reply
- Eko S. says:
  
  February 18, 2010 at 18:20
  
  Hi, I am glad that helped…
  Thanks…
  
  Reply
Direct Mail Advertising says:

February 2, 2010 at 04:15

I love your blog posts. Keep me posted

Reply
- Eko S. says:
  
  February 18, 2010 at 18:24
  
  Thanks, we try to regularly add a nice free themes and good article.
  
  Reply
Alice Watch says:

February 18, 2010 at 12:13

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.

Reply
watch toy story 3 says:

February 21, 2010 at 16:48

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.

Reply
money says:

March 1, 2010 at 03:07

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.

Reply
Sharen Puzo says:

October 17, 2010 at 21:57

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.

Reply
cepris says:

March 25, 2011 at 00:14

Useful tutorial, thanks!

Reply
Matt says:

May 24, 2011 at 01:06

Thanks for that Eko – was very helpful!

Reply
DG says:

June 25, 2011 at 07:44

Nice blog tutorial, GBU…

Reply
Anja says:

July 8, 2011 at 12:48

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?

Reply
Warford Designs says:

October 21, 2011 at 12:57

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

Reply