How To Style a Breadcrumb Like Apple.com Style Breadcrumb in WordPress
25th Feb 2010 | Posted by Eko S. | 30 CommentsIn 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!
You can see apple style breadcrumb here.
And what would we make, the end result like this
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(images/breadcru.png) repeat-x;
color: #555555;
line-height: 180%;
padding: 0 10px 0 10px;
float: left;
margin-bottom: 10px;
}
.arrowbread{
background: url(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(images/breadcru_right.png) 0 50% no-repeat;
}
.breadcrumbleft{
float:left;
width:7px;
height:22px;
background: url(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 :
- Make an Apple.com Style Breadcrumb for Your WordPress Blog
- Create apple.com-like breadcrumb using simple CSS
- How To Add Breadcrumb to Your WordPress Blog
About The Author
Shared
23 Comments to “How To Style a Breadcrumb Like Apple.com Style Breadcrumb in WordPress”
Add Comments (+)-
-
We try to keep learning to develop our writing and provide the best for the reader.
Hi, thanks
-
-
Hey this blog is great. I’m glad I came by this blog. Maybe I can contribute in the near future.
-
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.
-
-
-
Makasih mas…
Mohon do’anya agar bisa tetap eksis memberikan yang terbaik yang kami bisa.
Salam kenal mas
-
-
What a great blog on How To Style a Breadcrumb Like Apple.com Style Breadcrumb in WordPress | DynamicWP !
-
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.
-
-
-
-
Maaf mas baru bales..hehe..
Class .breadcrumbleftnya ada kok mas….breadcrumbleft{ float:left; width:7px; height:22px; background: url(images/breadcru_left.png) 0 50% no-repeat; } -
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
-
Oke sip, di coba dulu mas… iya yah aneh koq gk ada yg kasih tau ada kode yang kurang. :mrgrenn:
Thx jawabannya mas.
-
-
Trackbacks/Pingbacks
- How To Style a Breadcrumb Like Apple.com Style Breadcrumb in … | Drakz Free Online Service
- Premium Clear Durable Soft Silicone Skin Cover Case for Nintendo Wii Fit Balance Board + Wii Remote and Nunchuck + Fishbone Style Keychain | Movies & Video Games
- uberVU - social comments
- wp-popular.com » Blog Archive » How To Style a Breadcrumb Like Apple.com Style Breadcrumb in Wordpress | DynamicWP
- Very Useful 65 Wordpress Hacks | Design your way
- Very Useful 65 Wordpress Hacks | Web Development News
- Alex Jones Tv {Sunday Edition} 7/9: Welcome to “Pentagon Style” Internet & The Next Level of Tyranny : World online computer review
What a great resource!