How To Style a Breadcrumb Like Apple.com Style Breadcrumb in WordPress

25th Feb 2010 | Posted by Eko S. | 48 Comments

In our previous article, “How to Add Breadcrumbs Without Plugin and Best Practice” we have made a simple breadcrumb. In this tutorial we’re going to turn our breadcrumb into something that looks like the ones you see on Apple.com!

Style-Your-Breadcrumb2

You can see apple style breadcrumb here.

And what would we make, the end result like this

Breadcrumb

How to?

Step 1- prepare the images

You can use this images : download images, consisting of :

home.png
breadcru.png
right-ch.png
breadcru_right.png
breadcru_left.png

then upload to your /images folder ini your themes folder.

Step 2 – add this code to function.php

We modify this code ( on simple breadcrumb) so it became like this :

/*breadcrumb function*/
<?php
function the_breadcrumb() {
      if ( !is_home() ) {
          echo '<div class="breadcrumbleft" ></div><div class="breadcrumb" > <a style="float: left; color: #555555;" href="';
          echo get_option('home');
          echo '">';
          echo '<img src="http://www.yoursite.com/wp-content/themes/your_themes/images/home.png" style="margin-top: 5px;"/>';
          echo "</a> <div class=\"arrowbread\" ></div> ";
          }

          if ( is_category() || is_single() ) {
               $category = get_the_category();
               $ID = $category[0]->cat_ID;
               echo '<div>'.get_category_parents($ID, TRUE, '', FALSE ).'</div>';
          }

          if(is_single()) {echo ' <div></div>';the_title();}
          if(is_page()) {the_title();}
          if(is_tag()){ echo "Tag: ".single_tag_title('',FALSE); }
          if(is_404()){ echo "404 - Page not Found"; }
          if(is_search()){ echo "Search"; }
          if(is_year()){ echo get_the_time('Y'); }            

          echo "</div><div class=\"breadcrumbright\" ></div><div class=\"clear\"></div>";
    }
?>
/*end*/

Step 3 – Style your CSS file

Next thing we need to do is the CSS. Go into your style.css and paste the following:

/* breadcrumb style*/
.breadcrumb{
 background: url(/articles_and_tutorials/how_to_style_a_breadcrumb_like_apple_com_style_breadcrumb_in_wordpress/images/breadcru.png) repeat-x;
 color: #555555;
 line-height: 180%;
 padding: 0 10px 0 10px;
 float: left;
 margin-bottom: 10px;
}
.arrowbread{
 background: url(/articles_and_tutorials/how_to_style_a_breadcrumb_like_apple_com_style_breadcrumb_in_wordpress/images/right_ch.png) -1px 50% no-repeat;
 margin: 0 7px;
 width: 17px;
 height: 22px;
 float: left;
}

.breadcrumblink{
 float: left;
}

.breadcrumblink a{
 color: #555;
}

.breadcrumblink a:hover{
 color: #FFF;
}

.breadcrumbright{
 float:left;
 width:8px;
 height:22px;
 background: url(/articles_and_tutorials/how_to_style_a_breadcrumb_like_apple_com_style_breadcrumb_in_wordpress/images/breadcru_right.png) 0 50% no-repeat;
}

.breadcrumbleft{
 float:left;
 width:7px;
 height:22px;
 background: url(/articles_and_tutorials/how_to_style_a_breadcrumb_like_apple_com_style_breadcrumb_in_wordpress/images/breadcru_left.png) 0 50% no-repeat;
}
/* end breadcrumb style*/

Step 4 – Done!

Don’t forget to put this code

<?php the_breadcrumb(); ?>

in your single.php, archive.php and page.php.

If you review the code carefully, you can notice that you can create a variety of designs by changing background and separator images. Try and see the results!

Further Resources :

38 Comments to “How To Style a Breadcrumb Like Apple.com Style Breadcrumb in WordPress”

Add Comments (+)

cna training says:

February 26, 2010 at 04:32

What a great resource!

Reply
- Eko S. says:
  
  February 26, 2010 at 05:00
  
  We try to keep learning to develop our writing and provide the best for the reader.
  Hi, thanks
  
  Reply
dwidrg says:

February 26, 2010 at 12:40

artikel bagus……..numpang ngeksis dulu dari balikpapan

Reply
Dorian Mcclusky says:

March 4, 2010 at 20:38

Hey this blog is great. I’m glad I came by this blog. Maybe I can contribute in the near future.

Reply
Large Plastic Storage Boxes says:

March 15, 2010 at 14:01

I really liked your blog! great

Reply
Σχολή Χορού says:

March 16, 2010 at 08:51

Wonderful professional level themes, but this php is a bit hard to implement for a beginner like me. if someone can send me the LightFolio function.php, style.css, single.php, archive.php and page.php already hacked i would be grateful. Thank you for your time.

Reply
remote computer repair says:

April 12, 2010 at 19:15

This is exactly the information I was looking for, thanks!

Reply
Yücel says:

May 6, 2010 at 09:14

can not download images ???

Reply
- reza says:
  
  May 6, 2010 at 10:42
  
  I just tried download the image and all is ok, image is still downloadable
  
  Reply
verizon saga says:

May 15, 2010 at 05:02

wuich keren ..

masuk dalam “very-useful-65-wordpress-hacks”

Reply
- Eko S. says:
  
  May 15, 2010 at 18:03
  
  Makasih mas…
  Mohon do’anya agar bisa tetap eksis memberikan yang terbaik yang kami bisa.
  
  Salam kenal mas
  
  Reply
computer running slow says:

June 1, 2010 at 05:21

What a great blog on How To Style a Breadcrumb Like Apple.com Style Breadcrumb in WordPress | DynamicWP !

Reply
George Serradinho says:

June 9, 2010 at 00:50

Thanks for this tip. I originally had the breadcrumb, but I did not cater for the tag,search, 404 condictions. This helped me to include them and now it looks so much better.

Reply
- Eko S. says:
  
  June 9, 2010 at 01:37
  
  Hi George, we’re glad this article has helped.
  
  Reply
satrya says:

June 30, 2010 at 00:08

Wihh,, keren nihm mksih tutornya

Reply
- Eko S. says:
  
  June 30, 2010 at 03:30
  
  Sama-sama mas, kami juga senang bisa membantu
  
  Reply
satrya says:

June 30, 2010 at 05:13

Mas koq gk berhasil ya ? acak2an stylenya

Reply
- satrya says:
  
  June 30, 2010 at 05:17
  
  seperti ada yg kurang classnya mas ? .breadcrumbleft nya gk ada loh mas ? bingung nih
  
  Reply
  - Eko S. says:
    
    July 1, 2010 at 01:31
    
    Maaf mas baru bales..hehe..
    Class .breadcrumbleftnya ada kok mas…
```
.breadcrumbleft{
	 float:left;
	 width:7px;
	 height:22px;
	 background: url(/articles_and_tutorials/how_to_style_a_breadcrumb_like_apple_com_style_breadcrumb_in_wordpress/images/breadcru_left.png) 0 50% no-repeat;
}
```
  - satrya says:
    
    July 1, 2010 at 12:11
    
    Bukan pada css nya mas, tapi di functionnya.. maaf banyak koment
  - Eko S. says:
    
    July 3, 2010 at 04:04
    
    Wah…makasih mas uda ngingetin, kok selama ini ga ada yang nanyain ya?
    Uda kami perbaiki file function.php -nya.
    Pada baris ke -5 di tutorial ini ada yang hilang, sudah kami tambahkan seperti ini :
```
echo '<div class="breadcrumbleft" ></div><div class="breadcrumb" > <a style="float: left; color: #555555;" href="';
```
    Makasih
  - satrya says:
    
    July 3, 2010 at 04:35
    
    Oke sip, di coba dulu mas… iya yah aneh koq gk ada yg kasih tau ada kode yang kurang. :mrgrenn:
    Thx jawabannya mas.
  - satrya says:
    
    July 3, 2010 at 05:35
    
    mrgreennya gk muncul.. ulang lagi deh
Los Angeles Dumpster Rental says:

August 9, 2010 at 13:41

I have never had any luck creating my own bread crumb. Thank you for the helpful insight, I hope this works.

Reply
The Good Doctor says:

October 1, 2010 at 15:35

Thanks for this tutorial. Need to do this on my blog ASAP!

Reply
- Eko S. says:
  
  October 1, 2010 at 22:16
  
  We are glad if it useful
  
  Reply
Ervin Doubet says:

February 7, 2011 at 14:05

Very good site, where did you come up with the info in this post? Im glad I found it though, ill be checking back soon to see what other articles you have.

Reply
aand says:

May 17, 2011 at 12:13

bisa di buat di blogger mas breadcrum ini?

rhanks infonya..

Reply
- Eko S. says:
  
  May 18, 2011 at 00:17
  
  Wah, kalo prinsip kerjanya mungkin bisa diterapkan, tapi kodenya ga bisa dipake di blogger mas.
  
  Salam Kenal
  
  Reply
Cecila Hammons says:

August 23, 2011 at 23:19

I am glad that I found this website, precisely the right information that I was looking for!

Reply
Rachael says:

October 22, 2011 at 10:03

hi there

i want to try this out, but I’m not to good at PHP and this may be quite simple, but where does the breadcrumb code go in the functions.php file. Where do you place it?

Hope you can help?

Thanks

Reply
Kim says:

March 7, 2012 at 10:53

Cheers for the tutorial, really nice!

Reply
tdorr07 says:

June 6, 2012 at 15:58

How do I get it to display parent pages as well?

Thanks

Reply
- tdorr07 says:
  
  June 6, 2012 at 15:59
  
  With the parent pages being clickable.
  
  Reply
zetar says:

October 13, 2012 at 05:26

Yes,your point is great,if you are interesting in packaging,plaese scan the next.
Life is like to buy a packaging, buy a good packaging like to find a good object, we mutually consistent. Buy a bad package, simply do not fit your product, but not worth the candle, if forced to use an incompatibility with their own objects, even if married, it will not last long. Cherish life, to find a good object, buy a good packages.We are special in packaging and Package Manufacturer and please send email to: info@zetarpackaging.com, our website is http://www.zetarpackaging.com

Reply
Ghandi says:

May 2, 2013 at 14:02

Hi, thanks for this, I really like the look of it and it’s so easy to implement.

My only questions is, and I don’t know if it’s a daft one, but how do I get the breadcrumb trail to be multi-level? Every page and post just displays [H] > Page Name, where [H] is the home icon. I have tried using categories.

Thanks,
Ghandi

Reply
mohit says:

August 2, 2013 at 04:13

hey thnks a lot for this lovely post and breadcrumbs styling!! thnsk a lotttt

Reply
wisnu pramono ES says:

May 27, 2014 at 21:22

waw…very helpfull. Thank’s

Reply