WordPress Themes are very flexible, you can easily make use of PHP. The functions.php of a Theme can easily be modified to add several functions to it.
In a small series of tips and hacks of creating a theme, I will show you how to add a breadcrumb navi in your theme. This kind of navi has established in many websites and is an added value to a user friendly navigation.
Just FYI; every body who doesn’t like to mess around in functions, there are also some Plugins available.
This is how it work’s
The solution without a Plugin, directly in your theme. You have to copy the following function in functions.php; so it will be available in your theme and can be used everywhere. The function will be called in your header.php for example and via CSS formated. I used the class breadcrumb . An example of my dev blog is showing in the picture above.
// breadcrump Navigation
if (!function_exists('fb_breadcrumb_nav')) {
function fb_breadcrumb_nav() {
if ( !is_home() || !is_front_page() ) {
_e('');
} elseif (is_page() && $post->post_parent ) {
_e( get_the_title($post->post_parent) );
_e(' » ');
_e( the_title() );
} elseif ( is_search() ) {
_e('Suche nach: ') . the_search_query() . _e('');
}
}
}
}
You can change this function above as you like of course. It is just a simple example and just explain the idea and the function. You can also adjust the structure and output by the help of Conditional Tags. This function is without any modification usable and shouldn’t provide any big problems to implement.
The mix of HTML and PHP can be confusing for some readers, but it was important for me to show the structured outline of this function. That’s why I implement HTML in my example. Of course you can use „echos“ to deliver variables.
In one’s own Account
I wish you fun with experimenting and using this solution; Feedback is also welcome.
But before you have a question, please try to understand the code first. I’m swamped in support emails and can barely answer all of them due to lack of time. I prefer to use my little free time to write about ideas, solutions on this blog. I appreciate your understanding.
Comments
11 responses to “Easy Breadcrumb Navi With WordPress”
Thank you for the tip. I was searching for a light weight solution for breadcrumbs.
[…] ψάχνοντας, βρήκα μία πολύ ενδιαφέρουσα Function. Δύο για την ακρίβεια, αλλά η δεύτερη αν και είναι ποιό […]
Great tips, I was looking for it for quite some time. Most of the site I found only tell about plugin…thanks.
@Active Blogger, true, there are a lot of breadcrump plugins available, some of theme with a big load of code, which is definitely not necessary.
Not working in wordpress 2.8 …
Catalin, oh yes. It works in wp 2.8.5. It’s perfect. Tnx
Thanks heaps, working well although I’m trying to modify it a bit to go another level deeper (on pages) and also grab the url’s of the parent/grandparent pages.
@Al
A slight modification to the is_page() & $post->parent condition can do that. Instead of using $post->parent, use $post->ancestor.
replace …
elseif (is_page() && $post->post_parent ) {
_e( get_the_title($post->post_parent) );
_e(‘ » ‘);
_e( the_title() );
}
with …
elseif (is_page() && count($post->ancestors) > 0 ) {
for ($i = count($post->ancestors)-1; $i>=0; $i–) {
_e( get_the_title($post->post_ancestors[$i]) );
_e(‘ » ‘);
}
_e( the_title() ) . _e( ”);
}
That should work. The principle is to use the array of ancestors you get through $post->ancestors and iterate through that.
It doesn’t displays all the categories that the post belong to! I have a post that belong to one sub category, when I enter the best it should displays something like this:
Home page > Main category > Sub category > post title
but it only displays:
Home page > Sub category > post title
Hi @Tony
if (!function_exists('fb_breadcrumb_nav')) {function fb_breadcrumb_nav() {
if ( !is_home() || !is_front_page() ) {
global $post;
_e(' ') . bloginfo('name') . _e(' » ');
if ( is_category() ) {
single_cat_title();
//the_category(', ');
} elseif ( is_single() ) {
the_category(', ') . _e(' » ') . the_title() . _e('');
} elseif ( is_page() && $post->post_parent ) {
_e( get_the_title($post->post_parent) );
_e(' » ');
_e( the_title() .'');
} elseif ( is_page() ) {
_e( the_title() . '');
} elseif ( is_search() ) {
_e('Suche nach: ') . the_search_query() . _e('');
}
}
}
}
Blizna,
I used your code in order to get the sub-categories. I am trying to place the results within a div tag in order to style it, but no matter what I try my closing tag ends somewhere else.
Any ideas as to how to add an html tag to this code? Thanks