16_08_2008
WordPress Categories Breadcrumb Navigation
Scrawled by Ian | WordPress Tips
Background
I’m currently working on a custom WordPress Theme that uses category and sub-category archives extensively to create a document library.
I wanted to add breadcrumb navigation to the site to show the relationships between the categories and sub-categories and to add an extra level of usability to the site.
So here are the few lines of code I’ve written to create the category breadcrumb navigation:
<?php
$category = get_the_category();
$current_cat = $category[0]->cat_ID;
?>
<p class=”breadcrumb”> <a href=”<?php echo get_option(’home’); ?>/”>Home Page</a> » <?php echo get_category_parents($current_cat, TRUE, ‘ » ‘); ?> <?php the_title(); ?></p>
Note: This code must be added inside the Loop to ensure it works as intended. I’ve added this to both the archive.php – plus all category specific Template files – and single.php Template files.
Let’s look at the code a little closer.
Getting the Current Post’s Category
The first section looks like this:
<?php
$category = get_the_category();
$current_cat = $category[0]->cat_ID;
?>
This code uses the get_the_category() to get the category ID for the currently displayed category archive or post and passes it to a variable – $current_cat – for use later on when discovering the category hierarchy.
Creating the Hierarchy and Displaying the Breadcrumbs
The next section of code is used to create the hierarchy between the categories and to display the breadcrumb links to the user.
<p class=”breadcrumb”> <a href=”<?php echo get_option(’home’); ?>/”>Home Page</a> » <?php echo get_category_parents($current_cat, TRUE, ‘ » ‘); ?> <?php the_title(); ?></p>
The first part of the code:
<a href=”<?php echo get_option(’home’); ?>/”>Home Page</a>
simply adds a link back to the site’s home page.
The clever part of creating the category hierarchy and breadcrumbs is done by the get_category_parents() function. This creates a list of the parents categories of a category.
I’m passing 3 parameters to this function:
- $current_cat: This is the category ID of the current post for which I want to return the parents.
- TRUE: This ensures that each parent category is displayed as a link.
- ‘ » ‘: This is the character I want to use to separate each category in the breadcrumbs.
The final part of the code looks like this:
<?php the_title(); ?>
If the users on a Post page this displays the title of the Post, otherwise it’s blank.
Pros & Cons
Using this code to display category breadcrumbs is a pretty straight forward way to add extra level of navigation to a WordPress powered site.
However, there are a few draw backs:
- It’s only category based navigation - If you want to add similar functionality for Pages and Sub-Pages additional code is needed.
- Posts can belong to only one category – This is a fundamental part of creating a hierarchical breadcrumb navigation: when writing a post it’s essential to only add it to only one category.
- Categories are always displayed as links followed by the separator character - This is great if you’re viewing a single Post; it’s exactly what you want – a link back up to the parent categories. But when viewing a category archive, it can look a little bit odd.
If you use this code and discover any other issues or any ways to improve it please feel free to add a comment below.
Newer: 3 Quick WordPress SEO Tips
Older: Dad About The Boy WordPress Theme
Blog Home: Blog Post Index
WP Limits » Blog Archive » Navigation Tips: Suckerfish, Sliding Doors, and Breadcrumbs wrote on the 15_09_2008
[...] Navigation for Categories – http://www.7879designs.com/wordpress-tips/wordpress-categories-breadcrumb-navigation/ A lot of magazine sites use categories as the main navigation to better separate content. We all [...]
????? Wordpress ??? - J Solutions Blog wrote on the 28_09_2008
[...] ????? Wordpress ???????? Function ?????????????????????????? WordPress Categories Breadcrumb Navigation? [...]