How to: Breadcrumb function for WordPress

by Jean-Baptiste Jung. 85 Comments -

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.

Une fonction breadcrumb pour WordPress

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.

Comments (85) - Leave yours

  3. Toxane said:

    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… ;)

  8. Ozan Onay said:

    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”;}

  17. Samsara said:

    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!

  19. Samsara said:

    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. :)

  23. How to: Breadcrumb function for Wordpress | 毒龙的世界 said:

    [...] 一直使用Breadcrumb NavXT 插件来实现网站的导航功能，原来，是可以修改function.php文件来实现这个功能的。方法如下：（转自玩意志；中文原帖为：http://onease.cn/?p=291 另英文贴：http://www.catswhocode.com/blog/blogging/wordpress/how-to-breadcrumb-function-for-wordpress-6） [...]

  26. 手机网 said:

    手机网提供专业的手机评测,手机行情,手机评测,手机新品报道,手机图片,涵盖智能手机,音乐手机,拍摄手机,3G手机,CDMA手机等.

  27. Betty said:

    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

  28. 手机屋 said:

    手机屋提供专业的手机评测,手机行情,手机评测,手机新品报道,手机图片,涵盖智能手机,音乐手机,拍摄手机,3G手机,CDMA手机等.

  29. 游戏快报 said:

    游戏快报是专业网络游戏站点提供业界新闻/资讯，新游，游戏攻略，网络游戏产业等信息的网络游戏网站；是一家专业从事信息和商务服务的网络游戏门户网站，全面整合游戏开发商、游戏运营商、销售渠道、网吧、玩家组织等各种资源，关注网络游戏产业的每一个细节！

  31. christopher said:

    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

  33. barney_1 said:

    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

  34. Anthony Alexander said:

    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.

  39. Andre said:

    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.

  42. Noe Ruiz said:

    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 ”;
    }
    }

  45. Bill said:

    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?

  46. Anna B. said:

    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();
    }
    }
    }

  47. dan said:

    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();
    }
    }
    }

  48. Devin said:

    @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; }

  49. Luis Lopez Garay said:

    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.

  50. Harmeet said:

    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.

  51. Advanced Wordpress Breadcrumbs with Thesis — Erythisis Designs said:

    [...] While working on another web site with WordPress and Thesis, I decided that breadcrumbs would be a perfect little extra detail. My initial response was to head over to ThesisThemeTools, where I had seen a breadcrumb tutorial before (WordPress does not have an internal breadcrumb function). However, the implementation, while definitely good and valid, doesn’t have the flavor I like. So with a little coding inspiration from CatsWhoCode, I developed an advanced version which combines the easy customization and plugin-free power of Thesis, the div and css structure from ThesisThemeTools, and the page-specific crumb-code from CatsWhoCode. [...]

  53. Samson said:

    Very helpful. How do I replace the “home” bit in “echo get_option(’home’);” to read the word “Home” whilst keeping the link?

  54. alex said:

    Tx, for the function

    but i notice i can’t use it twice

    I would like to put it in the header and in the footer?

    Or does it only work within the loop??

    Do you have a breadcrumb function based on the url and just exclude some segments???

  58. Al said:

    Is there a way to edit this so that it correctly shows a breadcrumb for nested pages.

    I have several pages (not posts) with sub-pages and when I navigate to these, the breadcrumb only shows

    home >> sub -page

    rather than:

    home >> parent page >> sub page.

    Thanks,
    Alan.

  59. Diego said:

    i’m getting an error when i refresh my home page and the background color became gray, could anybody hook me up please?

    this is what i see: function the_breadcrumb() { if (!is_home()) { echo ”; bloginfo(‘name’); echo ” » “; if (is_category() || is_single()) { the_category(‘title_li=’); if (is_single()) { echo ” » “; the_title(); } } elseif (is_page()) { echo the_title(); } } } at the top of the home page

    cheers, Diego

  61. Amy said:

    I looked at Renate’s code, and I came up with the following from what they posted (it also includes Ozan’s code):

    function the_breadcrumb() {
    global $post;
    if ( !is_home() ) {
    echo ‘‘;
    bloginfo(‘name’);
    echo “     » “;
    if ( is_category() || is_single() ) {
    the_category(‘, ‘);
    if ( is_single() ) {
    echo ” » “;
    the_title();
    }
    } if ( is_page() && $post->post_parent ) {
    echo ‘post_parent) . ‘”>’;
    echo get_the_title($post->post_parent) . ”;
    echo “     » “;
    } if ( is_page() ) {
    echo the_title();
    }
    }
    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’;}

    }

    My breadcrumb looks like this:

    Home > Parent > Subpage

    I am pretty new to programming languages, so if anything needs reworking, let me know. Everything seems to be working, but I also don’t have much in the site I am working with to know if there are some bugs.

    Also, does anyone know how to make it go further down, like if I had a subpage, under the first subpage?

  62. Ricardo said:

    Hi
    So I copy and pasted the the code to the functions.php page and now my site says

    Warning: Cannot modify header information – headers already sent by (output started at /home1/emptykin/public_html/main/wp-content/themes/magazine-basic/magazine-basic/functions.php:2) in /home1/emptykin/public_html/main/wp-includes/pluggable.php on line 868

    I can’t even login

    Wondering if you have an idea of how to fix this.
    Thanks

  65. Sandra said:

    Woohoo. Thanks alot!!!
    This perfectly worked for me and I was able to change it how I want it to look.
    Great post.

  66. Annette said:

    Hi!

    I looked at Renate’s code. I came up with the following and my breadcrumb looks like

    Home > Parent > Subpage

    I don’t manage that
    - Parent has no link, when it is only: Home > Parent
    - Parent has a link, when it is: Home > Parent > Subpage

    function the_breadcrumb() {
    global $post;
    if (!is_home()) {
    echo ‘‘;
    echo “Home”;
    echo “     » “;
    if ( is_category() || is_single() ) {
    the_category(‘, ‘);
    if ( is_single() ) {
    echo ” » “;
    the_title();
    }
    } elseif ( is_page() && $post->post_parent ) {
    echo get_the_title($post->post_parent) . ”;
    echo ” » “;
    echo the_title();
    } elseif (is_page()) {
    echo ‘‘;
    echo the_title();
    echo “    “;
    }
    }
    }

    Does anyone know how to go on? What is wrong in my code, what is missing?

    Thank you very much!
    Annette
    (i am a beginner, no website online – hopefully next week; testing wordpress with xampp)

  69. Ryan said:

    Great code but experiencing issues.

    Could someone please provide and explanation why when echoing the_title(), do I get dashes in between words with %e2%80%99 replacing quotations etc… yet it reflects correctly in the URL?

    Ascii problems?

    Ideal solution would be no dashes and standard quotation marks.

    Thanks in advance.

  70. Aaron said:

    Hello,
    This works great, but I was wondering how I can style the current page. I tried to put a span around the echo the_title() in the last echo, but no dice.

    Thanks,

    Aaron

  72. Enjo said:

    Hi! I use breadcrumb, thas moment is ok.

    But
    is not listed when creating a custom page (page-portfolio, page-gallery, video-page)

    I’m not able to make this change, you can help me?

    Thanks!!!!!

  73. Rodolfo Alvarez said:

    Hi, it works for me but I have a problem. I have a page template for my portfolio, and all the items hace the portfolio category, the problem is that my breadcrumb change when I´m on a more deeper level.

    What i mean is this: my breadcrumb looks like these HOME>PORTFOLIO> and when I hit an item inside my portfolio template my breadcrumb changes from the portfolio template page for the category portfolio inside my blog page.

    What shoul I do?

  74. Rodolfo Alvarez said:

    I have a portfolio template theme with all the posts inside of it with the category portfolio. That generates me a problem when i hit an item inside my portfolio item. It returns me to the category and not the template, why? could you help me?

    Sorry for my bad english

  76. jaffa said:

    I would like to display the parent category as a link only. I do not want to display any of the sub-categories. Sometimes, I have posts that belong in more than one ctaegory but displaying them all looks odd as they are quite long names.

    Can anyone tell me how I can just display the parent category please?

    Ideally, I would like my breadcrumb to look like this Home> Blog > Post title

    Where Blog is the parent category. Hope that is understandable.

    Thansk you

  77. Thomas Cox said:

    Apoligies posted that wrong, here goes:

    function the_breadcrumb() {
    if(is_home()){
    echo ‘Home‘;
    }
    if (!is_home()) {
    echo ‘Home‘;
    echo ” » “;
    if (is_category() || is_single()) {
    the_category(” » “);
    if (is_single()) {
    echo ” » “;
    the_title();
    }
    } elseif (is_page()) {
    echo the_title();
    }
    }
    }

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!