Posted: 02 Jan 2009 12:00 AM PST
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
Then, to display the post title, the code you need is
So our final code, with some arrows added in is:
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:
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:
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:
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 subscribed to email updates from Hack WordPress |
To stop receiving these emails, you may unsubscribe now.
|Email delivery powered by Google|
|Inbox too full? Subscribe to the feed version of Hack WordPress in a feed reader.|
|If you prefer to unsubscribe via postal mail, write to: Hack WordPress, c/o Google, 20 W Kinzie, Chicago IL USA 60610|