How to: Breadcrumb function for Wordpress
Unfortunely, Wordpress doesn’t have a default function to display a breadcrumb. We’ll see how to create this navigation technique, and display it on our posts, pages and categories archives.
Breadcrumb…What’s that?!?
Wikipedia says:
Breadcrumbs or breadcrumb trail are a navigation technique used in user interfaces. Its purpose is to give users a way to keep track of their location within programs or documents. The term is taken from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

Let’s get started
One more time, Wordpress conditional tags will be very usefull. With them, we’ll be able to know easily if the page displayed by a visitor is an article, a page, or a category archive.
Then, we’ll have to use the right functions to show the site’s hierarchy. Nothing difficult here, Wordpress got all the functions we need to get links to homepage, articles and single pages.
I wrote a quite clean breadcrumb function, you just need to copy/paste it in the functions.php file from your Wordpress theme. If this file doesn’t exists, just create one and paste the function on it.
function the_breadcrumb() {
if (!is_home()) {
echo '<a href="';
echo get_option('home');
echo '">';
bloginfo('name');
echo "</a> » ";
if (is_category() || is_single()) {
the_category('title_li=');
if (is_single()) {
echo " » ";
the_title();
}
} elseif (is_page()) {
echo the_title();
}
}
}Now that we have the function, nothing simpler: We just have to edit the file where we want our breadcrumb to appear – I think that archive.php, single.php and page.phpis a good choice – and call the function.
<?php the_breadcrumb(); ?>
That’s all. You just created an easy way for your readers to navigate throught your blog sections.
Note, this script can be easily enhanced: For exemple, we should limit categories display and just show the first category.
And if you prefer installing a plugin instead of manually editing your theme files, you should have a look at the Breadcrumb NavXT plugin.




51 Comments + Trackbacks
6.23.2008
Very useful tip, thanks for sharing!
6.30.2008
Thanks it works.
Plug in was way over kill this is great!
7.12.2008
Thanks for this one.
Just a suggestion: use single_cat_title(); instead of the_category(‘title_li=’); because if you have posts listed which belongs to more than one category, the output is a little bit strange…
7.12.2008
@Toxane: Simply great! A few users reported me the problem and I didn’t found the solution. Thanks!
7.13.2008
This would be great if it could be implemented into the next version of openbook! Maybe enabled/disabled with a control panel checkbox!
7.13.2008
Why not! That’s a good idea, I’ll think about it!
8.17.2008
This is a good way to handle breadcrumbs, particularly for theme coders (not a good idea to have the theme depend on the NavXT plugin). If you intend to have breadcrumb navigation more broadly however, you shouldn’t forget about a few other possible pages, for instance:
elseif (is_tag()) {single_tag_title();}
elseif (is_day()) {echo”Archive for “; the_time(‘F jS, Y’);}
elseif (is_month()) {echo”Archive for “; the_time(‘F, Y’);}
elseif (is_year()) {echo”Archive for “; the_time(‘Y’);}
elseif (is_author()) {echo”Author Archive”;}
elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo “Blog Archives”;}
elseif (is_search()) {echo”Search Results”;}
8.17.2008
Thanks for sharing this, Ozan! I should now rebuilt a better function =)
8.23.2008
Thanks! I like to iplement “no plugin” solutions on my blog!
8.23.2008
This really helped me. Thanks.
8.27.2008
It’s doesn’t work for my theme. The page would come up blank after I put in the function on my single.php page
8.27.2008
@TheWebpreneur.ca : Really weird…Do you have an exemple code online somewhere that I can see?
8.27.2008
I copied and pasted my single.php code here..
http://www.thewebpreneur.ca/single-code/
10.31.2008
JBJ – thank you for this. I am about to try it out. However, could you please tell me where I would put Ozan’s code in relation to yours?
Thank you!
10.31.2008
@Samsara:
/* my code */
if {
…
}
/* put Ozan’s code here */
10.31.2008
Thanks so much JBJ! You know I just did not want to screw up the blog before I even had breadcrumbs implemented correctly right? Haha!!
Just to make sure…
Like this?
/*Ozan’s code?*/
if (is_category() || is_single()) {
Cause to me it looks like it’d be…
elseif (is_page()) {
echo the_title();
/*Ozan’s code?*/
But it is the 1st way?
Thanks for spending time with me.
11.14.2008
Ah at last, found it. Was looking all over the internet for this code, only found plugins. Thanks
2.18.2009
手机网提供专业的手机评测,手机行情,手机评测,手机新品报道,手机图片,涵盖智能手机,音乐手机,拍摄手机,3G手机,CDMA手机等.
3.10.2009
Thanks for this! I wanted to implement it into my theme rather than use a plugin. I think breadcrumbs are a real treat for visitors. Kind Regards, Betty
3.13.2009
手机屋提供专业的手机评测,手机行情,手机评测,手机新品报道,手机图片,涵盖智能手机,音乐手机,拍摄手机,3G手机,CDMA手机等.
3.22.2009
游戏快报是专业网络游戏站点提供业界新闻/资讯,新游,游戏攻略,网络游戏产业等信息的网络游戏网站;是一家专业从事信息和商务服务的网络游戏门户网站,全面整合游戏开发商、游戏运营商、销售渠道、网吧、玩家组织等各种资源,关注网络游戏产业的每一个细节!
4.19.2009
Just a suggestion: use single_cat_title(); instead of the_category(’title_li=’);
tried this and categories don’t show up, can I get some clarification how how the code should look
5.19.2009
I had been using “the_category(‘title_li=’)” and it did give me a weird readout when a post belonged to 2 categories.
I tried using the “single_cat_title();” but nothing displayed. Research pointed to this function returning nothing when a single page was being displayed… useless to us in this case.
I settled back on using the_category(). I can now display all categories this post belongs to in the breadcrumb. I add a separator (in this case &):
the_category(‘ & ‘)
No my breadcrumb looks like this:
Home -> Category1 & Category2 & CategoryN -> page_title
6.19.2009
All the breadcrumb plugins are completely retarded. And so is wordpress. Jesus. So much bloat, no modularity. All I wanted to do was wrap the crumbs in a ul / li structure and all the other plugins i tried were so useless. This is the 2nd time I’m using this script because both yoast and nav XT are garbage. Thanks a bunch.
9.22.2009
All I can say is Thank you thank you and thank you! I am amazed that WordPress has left out this very popular function by default. The less plugins a person can use the better. I have recently been designing WordPress themes and I have to say that this little snippet of coding you came up with is well worth the effort.
Only one little thing that I noticed though….when I created and assigned a “page” for the home page and also created another as the “blog” page for a theme I just did, I noticed that the breadcrumbs was blank for this one “blog” page but worked for regular pages, categories, home, etc. Hope that made sense?
Still…. it’s a great function you did.
10.22.2009
This doesn’t work if there are nested subcategories.
11.9.2009
Here is the breadcrumb wrapped in a unordered list with each link/category as a list item:
function the_breadcrumb() {
if (!is_home()) {
echo ”;
echo ‘‘.bloginfo(‘name’).’‘;
if (is_category() || is_single()) {
echo ”;
the_category(”);
echo ”;
if (is_single()) {
echo ”.the_title().”;
}
} elseif (is_page()) {
echo ”.the_title().”;
}
echo ”;
}
}
12.28.2009
I am NOT a programmer and am so surprised I finally got this to work on my site at all. I used the code from Noe Ruiz in the last post.
I need some help if possible. The background is dark and the text goes up as gray and blue so i cant see it. Can someone help me adjust the code to apply css to make it white?
12.29.2009
Thank you so much – I’ve been looking all over for this! Elegant, easy –
Just an FYI to replace the >> with the ASCII code if you’re pasting into functions.php via Dreamweaver…
function the_breadcrumb() {
if (!is_home()) {
echo ‘‘;
echo ‘Home’;
echo “ » “;
if (is_category() || is_single()) {
the_category(‘title_li=’);
if (is_single()) {
echo ” » “;
the_title();
}
} elseif (is_page()) {
echo the_title();
}
}
}
1.4.2010
great function, thanks. had some problems with the ascii so i used this to just have spaces between links:
function the_breadcrumb() {
if (!is_home()) {
echo “Home “;
if (is_category() || is_single()) {
echo ” “.the_category(“title_li”);
if (is_single()) {
echo ” “.the_title();
}
} elseif (is_page()) {
echo the_title();
}
}
}
1.9.2010
@Bill
I am not exactly sure how the markup is in the example you used but from the description he gave, This should work.
ul li { color: black; background: white; }
ul { color: black; background: white; }
1.13.2010
Well, that works perfect and I understand all te code but:
What if I want to stylize my breadcrumb? can I add in the echo’s and Evolve that echo’s in a DIV called I mean… #bread? I hope so.
Great tutorial.
1.22.2010
I am new to WP, but old with Joomla and can’t believe this is not standard functionality of WP.
Thanks for sharing this code. I will use it in all my wordpress designs.