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!

The Apple.com breadcrumb:

And what we’re making:

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.

I recently redesigned one of my sites, and integrated this, so you can see a working example here.

This was a guest post by Alex Denning, who is a WordPress power user, web design freelancer and currently maintains two sites – Nometet.com and GreenGrassGames.com. You can follow him on Twitter here. If you have WordPress knowledge and are interested in writing a post for WordPress Hacks, please contact us.

You are reading Make an Apple.com Style Breadcrumb for Your WordPress Blog © 2009 | WordPress Hacks | WordPress Directory | WordPress Forums | WordPress eBook

Enjoy writing about WordPress? Get your blog more exposure by joining the WordPress Hacks writing team!

Improving the navigation in your blog means visitors will find MORE of your content, and return MORE often. Even with the best content and lots of traffic – the most important thing is that people can QUICKLY find what they were looking for from the first moment they enter your blog!

I’m going to give you 10 different ways you can improve the navigation in your blog that anyone can (and should) implement for better usability when you have a WordPress powered blog. You will be surprised how much easier it will be to find content by using these techniques.

10 Steps to Improved WordPress Navigation

1. Add Breadcrumbs: This is a very easy fix, and one I don’t see on many blogs. Breadcrumbs are the simple link trail on the top of a web page like this: “Home -> Page -> SubPage”. It’s easy to add breadcrumbs, just use a 2.6+ compatible plugin like “Breadcrumb NavXT.
2. Get rid of Ugly Next and Previous Links: Every WordPress homepage, and any page that has lists of blog posts (search, archive), has simple “next” and “previous” links to navigate older posts. I have witnessed (countless times) visitors thinking that all the posts you had to offer were listed on the homepage and that was it (mainly people not familiar with WordPress). You should have a linked list of pages (like google) that says “this is page 1 of…” and links to “2, 3, 4, 5, etc”. It’s easy to fix this with plugins like WP-PageNavi or WP-Page Numbers.
3. Bold Pagination on Single Pages: You can’t use the last trick on single pages, but every single (post) page has links at the bottom to view the next and previous page as well. I edit my “single.php” file to change that text to something like “Post before this one” and “Post after this one”, and align them left and right (bolded). You can style them any way you want – the point is to make them stand out. Visitors often come from SERP’s to a single post page, make it easy for them to view other ones as well.
4. More Links and Excerpts: This is personal preference really, but I prefer to have post excerpts on pages instead of the entire post, because I feel it clutters up pages and makes everything run together (on most blogs). I like to encourage people to visit the single post page to read the entire thing. There are a couple ways to change a running post page (like search results, archives, index.php) to show excerpts. On your homepage, you can use the Homepage excerpts plugin to achieve this. On all other pages, just the “the loop” and change the_content to the_excerpt.
5. Multi-Paged Navigation: If you ramble on like I do, some of your posts can be dreadfully long. Break them up into multi-pages posts using a plugin like Multi-Page Toolkit. It’s not only better usability, but it creates multiple post pages so you can get more indexed in the search engines.
6. Related Posts: What better way to get people to stay on your blog than by recommending to them “related posts” that you’ve written?! All it takes is a plugin like Related Posts.
7. Most Viewed Posts: Like an MVP of the game – you should be showing your visitors your most valuable content! Lester Chan has a great plugin called WP Post Views that has a sidebar widget than can display your most viewed posts! This is a great way to showcase your best posts and keep people on your blog.
8. Most Popular Posts: Alex King has a plugin called Popularity Contest that displays how popular posts are.
9. Category Images: Having your categories a post is assigned to listed and linked is a great way to get visitors to view everything else you have posted in that category, but sometimes (like “ad blindness) readers are blinded to post meta info. Solve that by assigning images to your categories, so that they stand out prominently! All you need is the Category Icons plugin.
10. Sidebar Navigation: There are a bazillion options for pimping out your sidebar, and most bloggers seem to just liste categories, archives, and a blogroll. Check out all of the WordPress Widgets available, the WordPress Codex page for “Customizing Your Sidebar”, the List Authors widget, Parent Pages widget, and especially the WordPress plugin iFrameWidgets. The iframe widgets one is great if you use myBlogLog, BlogCatalog, Entrecard, or other third party widgets that may slow the load time of your blog.

By following these 10 steps to better navigation, your visitors will STAY LONGER and READ MORE each and every time they visit your blog. This article was a synopsis of my in depth article WordPress Hack #5: 10 Ways to Improve Navigation. Happy Hacking!

You are reading 10 Ways to Improve Navigation in WordPress © 2008 | WordPress Hacks | WordPress Directory | WordPress Forums | WordPress eBook

Enjoy writing about WordPress? Get your blog more exposure by joining the WordPress Hacks writing team!

So, does your WordPress theme have breadcrumbs built into it?   Whenever I’m picking a new WordPress theme to start designing a new site with, breadcrumbs are one of the first things I always look for.  With the exception of Brian’s Revolution themes, I’ve found that there really aren’t many (if any) other premium themes that come with breadcrumbs built into them (directly or via a WordPress plugin).  I also have yet to find any free WordPress themes that come with breadcrumbs built into them.

How to Add Breadcrumbs to Your WordPress Blog

Fortunately many WordPress plugin authors have come to our rescue.   For those of us that want breadcrumbs in our themes, there are now a number of WordPress plugins out there that you can use to easily accomplish this.   Probably the most popular is the Breadcrumb Navigation XT WordPress plugin, but I just noticed today that a new WordPress plugin was released by Joost de Valk called the Yoast Breadcrumbs plugin.    Joost has a great reputation as a plugin developer, so I have a feeling this plugin will work great as well.

If you decide to go with the Yoast Breadcrumbs plugin, you just need to upload and activate it, then place the following code where you want the breadcrumbs to display (usually above your post title or the content hook):

<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

Then you can use the plugin settings to get the breadcrumbs to behave how you wanted it to.

Call to Theme Designers

Where is the breadcrumbs love?   If you are working on a new free or premium WordPress theme, why not take a few seconds to build breadcrumbs into your theme?

If you’d like to see breadcrumbs built into more WordPress themes by default, leave a comment below so designers know there is a demand for it!

You are reading How To: Add Breadcrumbs to Your WordPress Blog © 2008 | WordPress Hacks | WordPress Directory | WordPress Forums | WordPress eBook

Enjoy writing about WordPress? Get your blog more exposure by joining the WordPress Hacks writing team!