Friday, January 2, 2009

Hack WordPress

Hack WordPress

Make an Apple.com Style Breadcrumb for Your WordPress Blog

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

<?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:

The Apple.com breadcrumb
And what we’re making: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.

Related posts:

  1. Improve Reader Navigation With The Breadcrumb Navigation Plugin
  2. How To: Display the Recent Posts of Specific Categories
  3. 6 WordPress Tips and Tricks
  4. How to: Create an Archive Page for your WordPress blog
Postado por Angola Xyami às 2:23 PM

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)
Related Posts Plugin for WordPress, Blogger...

MP3 Clips

Popular Posts