Breadcrumbs, as has been said before on WPHacks, are very useful, both for your SEO and reader’s navigation. In other words, there is no reason why you shouldn’t have them on your site.

There are a number of breadcrumb plugins you could use, but with a bit of WordPress code, you can avoid this. If you use sub-categories, then this will only display the name of the sub category.

A typical breadcrumb is something like this:

Home >> [Category] >> [Post Title]

WordPress can very easily do this – to get the name of the category the post is in, all you need is

<?php the_category(); ?>

Then, to display the post title, the code you need is

<?php the_title(); ?>

So our final code, with some arrows added in is:

<a href="/">Home</a> &raquo;  <?php the_category('   '); ?>   &raquo; <?php the_title(); ?>

So now that you’ve got your breadcrumb sorted, you can take this one step further and spice it up a bit. For the next part, we’re going to be using the code from a tutorial at Janko at Warp Speed, and with this code, we’re going to turn our breadcrumb into something that looks like the ones you see on Apple.com!

First, download the html version here, and open it in a your web editor (ie Notepad, Dreamweaver etc). Scroll down until you find <ul id=”breadcrumb”>. This is where we’re going to start editing. All you need to do is copy and paste the following code:

<ul id="breadcrumb">
<li><a href="/" title="Home"><img src="/images/home.png" alt="Home" class="home" /></a></li>
<li><?php the_category(', ') ?></li>
<li><?php the_title(); ?></li>
</ul>

This is basically the same code as we had above, just putting into a list. Make sure you upload the home.png file to /images/, and while you’re at it, upload the other images.

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

#breadcrumb {
font: 11px Arial, Helvetica, sans-serif;
height:30px;
line-height:30px;
color:#9b9b9b;
border:solid 1px #cacaca;
width:100%;
overflow:hidden;
margin:0px;
padding:0px;
}
#breadcrumb li {
list-style-type:none;
float:left;
padding-left:10px;
}
#breadcrumb a {
height:30px;
display:block;
background-image:url('/images/bc_separator.png');
background-repeat:no-repeat;
background-position:right;
padding-right: 15px;
text-decoration: none;
color:#000;
}
.home {
border:none;
margin: 8px 0px;
}
#breadcrumb a:hover {
color:#35acc5;
}

Once you’ve done that, then you’re done! If you copy the code from the source file (which you should), then make sure you change the url of the images.

Hi, I'm Alex Denning. I run a site called WPShout.com where I publish WordPress Tutorials. You should follow me on Twitter @AlexDenning!

  1. Trace says:

    That is freaking cool. It had never occurred to me that you could create a bread crumb like that… awesome.

  2. fahirsch says:

    Why is it called a breadcrumb?

    • Brendan Doherty says:

      They are called breadcrumbs because of fairy tale about Hansel and Gretel.

  3. @fahirsch – breadcrumbs are used to “find your way home.” If the site has a complex tree structure it can be useful to go back to a middle point rather than all the way home.

    Example: Home: Category 1: Category 1a: Detail

    A user might want to see Category 1b. Instead of going all the way home they could click Category 1 instead, saving the a click and page load :)

  4. Great. This is just documentated to the max.
    Very well done. Stumbled.

    Pssht! I never knew what was meant by BreadCrumbs.
    But, now, I know, what is it, and why is it called the name.

    NOTE: I’m falling in love with your awesome theme.
    Oh yeah!, I see the Blog Design Studio banner there.
    No wonder :)

  5. Shirley says:

    Nice tutorial. Breadcrumps are a key piece of navigation on blogs with a lot of articles or categories.

  6. geekTips says:

    Very nice tutorial indeed and what make it so great is that no plugin is needed.

  7. Ha! That’s pretty awesome. I’ll try it out, check out the results at http://defaultprime.com. Thanks again! :)

  8. Alex Denning says:

    Thanks for all of the great feedback!

    I’ve just dugg this, so if anyone is on Digg, the link is here: http://tr.im/2y49

  9. I was looking for some code that would generate a breadcrumb if you had both categories AND sub-categories, and (to make life easier) assigned each post to only one sub-category.

    Anyway, I finally hacked into the WP files, made a few changes, and now can generate a breadcrumb trail with just one line of PHP: http://www.malcolmcoles.co.uk/blog/breadcrumb-trails-in-wordpress/

  10. AlexVolkov says:

    It always shows the path to the last post, including home page.
    Fix this -

    ???????

    Here is my full post – http://alexvolkov.ru/navigaciya-v-stile-applecom-dlya-wordpress.html

  11. teddY says:

    Nice way of implementing this in a WordPress installation! I’ve read tutorials on how to recreate the Mac-style breadcrumb menu but they rarely go that extra one step to suggest how to implement it in WordPress – and you’ve done it. Thank you so much for sharing!

    There’s a simply Breadcrumb plugin out there but it doesn’t display the items in an unordered list but just in plain text wrapped in spans. I guess it’s possible to modify the plugin although your way is an ingenious workaround for it :)

    p/s: Dugg!

  12. T-Law says:

    This is great, but I have problem. How to show more than one category? Post is posted under 3 categories so how to show more than one category in breadcrumbs navigation bar? Thanks

  13. Michael says:

    A very elegant solution. I’ll try it later. Thanks.

  14. David says:

    I use a revolution theme which has a breadcrumb.php I edited to get this to work. My problem is that when listing posts the breadcrumb show the title of the top post instead of just the category.

    Any help would be appreciated.

    D

  15. Hi Alex,

    I am using “Breadcrumb Navigation XT” plugin and I would like to manage like this way then what should I have to do ? Just check one internal page of my sit http://www.jaydip.info/blogging/why-you-should-comments-on-my-blog/

  16. rolandogomez says:

    I implemented your code on my WP3 site, works very well, except when I get to the buddypress members/activity site. I’m not a coder/programmer, so I’m just guessing at this, can you help me get the right code so it works, as for some reason it pulls from one of my categories when in the members/activity areas, everywhere else it works fine, you can see at http://www.lensdiaries.com but when you click on members or activity, or a member’s profile, it pulls from my books category. Here is the code, if I can do this right, that I’m using:

    Thanks, rg.

  17. william says:

    Excellent idea. Ill have to give it a try

Trackbacks/Pingbacks »

  1. WPscoop says:
  2. Ways to Create Breadcrumbs in Wordpress - Wordpress Article by Addicott Web, Chicago Web Design & Web Consulting says:
  3. Ways to Create Breadcrumbs in Wordpress | Hirsch Fishman says: