WordPress Tutorial: Simple Breadcrumb Navigation
I am currently working on some larger projects, and some of them are in desperate need of a breadcrumb navigation, since there are so many sub categories and pages, that users often have a hard time not to lose track of their current position on the site.
After searching the web for an adequate plugin, the only Breadcrumb navigation I could find was Breadcrumb NavXT. The plugin is basically the only one which supports nested pages as well as nested categories. It has a ton of options… to my mind there are way to many. After testing the plugin on a blank installation my Database query count went from 17 to 59 even if I was on the starting page where no breadcrumb navigation was displayed. So I decided to code a lightweight version for myself.
What you will learn here, are the basics of creating a simple breadcrumb navigation. This tutorial doesn’t offer a complete script, just some snippets to experiment with =)
First of all here is the whole script:
function my_breadcrumb() {
if ( !is_front_page() ) {
echo '<p class="breadcrumb"><span class="breadcrumb_info">You are here:</span> <a href="';
echo get_option('home');
echo '">';
bloginfo('name');
echo "</a> » ";
}
if ( is_category() || is_single() ) {
$category = get_the_category();
$ID = $category[0]->cat_ID;
echo get_category_parents($ID, TRUE, ' » ', FALSE );
}
if(is_single() || is_page()) {the_title();}
if(is_tag()){ echo "Tag: ".single_tag_title('',FALSE); }
if(is_404()){ echo "404 - Page not Found"; }
if(is_search()){ echo "Search"; }
if(is_year()){ echo get_the_time('Y'); }
echo "</p>";
}
I am using WordPress conditional Tags to check which section/post or page we are currently viewing. As you can see at the top, I don’t want to display the breadcrumb on the starting page. If we aren’t viewing the starting page, the first level – a link to the starting page – will be displayed.
if ( is_category() || is_single() ) {
$category = get_the_category();
$ID = $category[0]->cat_ID;
echo get_category_parents($ID, TRUE, ' » ', FALSE );
}
This is the trickiest part of the whole script since it uses some uncommon WordPress functions. It basically asks WordPress to display all parent categories of the current category/post. This way we can handle nested categories as well
If you want more information on get_the_category and get_category_parents just check the WordPress Documentation =)
if(is_single() || is_page()) {the_title();}
if(is_tag()){ echo "Tag: ".single_tag_title('',FALSE); }
if(is_404()){ echo "404 - Page not Found"; }
if(is_search()){ echo "Search"; }
if(is_year()){ echo get_the_time('Y'); }
This one is pretty straight forward: We are using conditional comments again to handle some of the various scenarios like post, pages, tag and year archives, 404 sites etc.
If you want to create a script that can handle all possible scenarios you should check the conditional tags reference to see which cases need attention.
These short snippets should invite you to experiment a little bit since they can build the foundation to a complete lightweight breadcrumb script. It is far from complete now (nested pages don’t work, nested categories need a few tweaks, attachment handling is missing etc) but I guess its enough to start with ;)
I am currently scripting a complete Breadcumb Navigation for my own and I am pretty satisfied with the outcome. It only needs some more minor tweaks to be ready for the public, but I dont’t know if I can spare some time in the upcoming future so I wanted to share these basics now, just in case you need them =)
What you can expect when my script is complete: a very lightweight breadcrumb script with little to no options but the possibilty to tweak it easily with little php knowledge, and the power to display a breadcrumb navigation without stressing your database (The NavXT-plugin uses about 40 queries, mine will use about 0-4)
Thanks to Frank Bültge for the inspiration ;)
Cheers. Massive help this one.
It would be killer with a bit of jQuery link-preview JS thrown in (you’ll see the preview of the page when you hover over the breadcrumb link).
Thats a nice idea and something thats definitively possible but what ecaxtly would you want to show? A screenshot of the page or some kind of post excerpt? I guess the later would be more satisfying for the user but I wouldn’t know what to display on multi post sections like archives…
Just a FYI, the tones of db queries were from all the options having their own db entry. In Breadcrumb NavXT 3.0 (currently available as a fully functional beta) all of the options are placed in one db entry, which reduces the queries to just 1 instead of 40 something. Also, that is using the administrative interface, which you do not have to use ;) as the class can be directly accessed (hence the “core” plugin). The only case when it starts munching through queries is on page hierarchies, which end up being 3 db queries per each page deep the hierarchy is. This is due to some internal things WordPress does. However, there are some tricks that can reduce this to only 1 (or possibly less) db query per each page in the hierarchy.
Thats pretty neat =)
The “problem” of having 3 queries per page is what I am currently working on as well, at this point its the only reason I don’t publish the whole script.
I am pretty curious how you did solve this but I guess I will see it during some of your upcoming releases =)
Other than that your plugin is great but since I am able to do modifications directly in my Php file I am really happy with my solution, I am not restricted to anyone elses settings and the script is pretty small with about 100 rows of code ;)
I haven’t completely solved the problem of the three queries per a page deep in a page hierarchy (all other hierarchies do not have this problem), and the spoken of tricks won’t make the 3.0 release (the in general query reduction will be there but the page hierarchy “uber” optimization won’t). There is still quite a bit of investigation I need to do into the root of the problem. I do know that custom db queries do not seem to fix it (I thought they would but they end up being even less efficient due to some caching WordPress does).
A other syntax for the same idea – Breadcrump with WP
NICE ! Thank You for this!
Please Forgive my Ignorance because I wonder how to know the query counts?
You make me feel guilty because now I know a reason that make my site so slow loading. Thanks for this great tip and I shall use it… as well as thinking of making a better plugin.
Sorry if I be to straight forward, here is my improved version of your code:
if ( is_front_page() || is_home() ) {
bloginfo(‘name’);
echo "’s Home Page";
} else {
echo ‘<a href="’;
echo get_option(‘home’);
echo ‘">’;
bloginfo(‘name’);
echo "</a> » ";
if ( is_category() || is_single() ) {
$category = get_the_category();
$ID = $category[0]->cat_ID;
echo get_category_parents($ID, TRUE, ‘ » ‘, FALSE );
if(is_single()) {the_title();}
}
elseif(is_page()) {the_title();}
elseif(is_tag()){ echo "Tag: ".single_tag_title(”,FALSE); }
elseif(is_404()){ echo "404 – Page not Found"; }
elseif(is_search()){ echo "Search"; }
elseif(is_year()){ echo get_the_time(‘Y’); }
echo "</p>";
}
Now the breadcrumb has extra 2 features:
1. Less if = less work load.
2. Display blogname’s home page when it’s homepage.
I’ve got my breadcrumb down to one line of PHP. Details:
http://www.malcolmcoles.co.uk/blog/breadcrumb-trails-in-wordpress/
Admittedly, I had to hack the category-template.php file. But not that much …
Interesting post, just signed up to your RSS feed, hope to find some more great content here :)
Hallo, Ich habe Ihr Blog ?ber Google bei der Suche
I recently came accross your blog and have been reading along. I thought I would leave my first comment. Nice blog. I will keep visiting this blog very often.
http://yaycacudby.livejournal.com/ – ??????? ????? ???? Russia ???? ?????? ????
Does this work with the new 3.0 version?
Nice tutorial.
Thank you..
Great info!
useful info. thanks..soon html5 will take over the web :)