How to: Breadcrumb function for WordPress

by Jean. 92 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.

  • blake

    Very useful tip, thanks for sharing!

  • http://www.vistronic.com Vis

    Thanks it works.
    Plug in was way over kill this is great!

  • http://www.flowdrops.com Toxane

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

    • Travis

      just replace ‘title_li=’ with ‘, ‘ to separate multiple categories with a ,

  • http://www.lyxia.org jbj

    @Toxane: Simply great! A few users reported me the problem and I didn’t found the solution. Thanks!

  • http://www.wetcalamari.net Wet Squid

    This would be great if it could be implemented into the next version of openbook! Maybe enabled/disabled with a control panel checkbox!

  • http://www.lyxia.org jbj

    Why not! That’s a good idea, I’ll think about it!

  • Pingback: Favorieten en bookmarks voor 13 July | Cafe del Marketing

  • http://ozanonay.com Ozan Onay

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

    • http://www.kadimi.com/en/ Kadimi

      I agree, the function as in the article supports only single posts, categories and tags!!

  • http://www.lyxia.org jbj

    Thanks for sharing this, Ozan! I should now rebuilt a better function =)

  • http://shlapak.org.ua/ Kolia Shlapak

    Thanks! I like to iplement “no plugin” solutions on my blog!

  • http://john010117.com/ John

    This really helped me. Thanks.

  • http://www.thewebpreneur.ca TheWebpreneur.ca

    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

  • http://www.lyxia.org jbj

    @TheWebpreneur.ca : Really weird…Do you have an exemple code online somewhere that I can see?

  • http://www.thewebpreneur.ca TheWebpreneur.ca

    I copied and pasted my single.php code here..
    http://www.thewebpreneur.ca/single-code/

  • Pingback: WordPress Talk - August 28, 2008

  • Pingback: WordPress Resources - Weekend Links | Patrick DeVivo dot com

  • http://samsara.ihostyou.com Samsara

    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!

  • http://www.lyxia.org jbj

    @Samsara:

    /* my code */
    if {

    }
    /* put Ozan’s code here */

    ;)

  • http://samsara.ihostyou.com Samsara

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

  • http://fromtheold.com fromtheold

    Ah at last, found it. Was looking all over the internet for this code, only found plugins. Thanks :)

  • Pingback: How to: Breadcrumb function for Wordpress - 玩意志

  • Pingback: WPTUT - Wordpress Tutorials

  • Pingback: How to: Breadcrumb function for Wordpress | 毒龙的世界

  • Pingback: Making the most of Plug-ins at WordCamp Toronto « EyeSee

  • Pingback: Breadcrumb trails in Wordpress » malcolm coles

  • http://www.shoujuw.cn 手机网

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

  • http://www.vanbetty.nl Betty

    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

  • http://www.shouju5.cn 手机屋

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

  • http://www.yxw7.cn 游戏快报

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

  • Pingback: 10 Impressive Techniques to Spice up your WordPress Theme | DevSnippets

  • christopher

    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

  • Pingback: Ways of Creating Breadcrumbs in Wordpress - Wordpress Article by Addicott Web, Chicago Web Design & Web Consulting

  • http://jumptuck.wordpress.com barney_1

    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

  • http://novatvmedia.com Anthony Alexander

    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.

  • Pingback: 10 ways to make your wordpress theme look like pro. » GoSee-Design › lifestory of a freelance team

  • Pingback: 10 ways to make your wordpress theme look like pro. – jpablobr.com

  • Pingback: Wordpress Breadcrumbs | Arvind Andrion

  • Pingback: Wordpress Breadcrumb ohne Plugin | Blog | Pixeldreher André Nitz – Webdesigner aus Leipzig

  • http://www.pixelthemestudio.ca Andre

    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.

  • Pingback: Breadcrumbs o “migajas de pan” para WordPress | Summarg

  • Dave

    This doesn’t work if there are nested subcategories.

  • http://noeruiz.com Noe Ruiz

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

  • Pingback: How To Manually Add BreadCrumbs To Your Wordress Blog | Beep The Geek

  • Pingback: 5 Quick Tweaks To Improve Your Wordpress Blog

  • http://www.billwynne.com Bill

    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?

  • Anna B.

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

  • http://www.rustyspigot.com dan

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

  • http://www.25thingsdesign.com Devin

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

    • http://www.billwynne.com Bill Wynne

      Thanks Devin.

      Bil

  • http://www.conceptopixel.com Luis Lopez Garay

    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.

  • http://harmeet.gabha.net Harmeet

    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.

  • Pingback: Advanced Wordpress Breadcrumbs with Thesis — Erythisis Designs

  • Pingback: Créer un fil d’Ariane pour son thème wordpress | Les Wordpressiens - Spécialistes wordpress - by CNSX

  • Samson

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

  • alex

    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???

  • Pingback: Ways to Create Breadcrumbs in Wordpress | Hirsch Fishman

  • Pingback: 15 Do’s and Don’ts of Effective WordPress Theming | Theme Lab

  • Cron

    O.M.G. Clean, simple, perfect! Thank you very much.

  • http://www.alananna.co.uk Al

    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.

    • http://www.pressecounter.de Renate

      @Al: You could try this. For me it works.

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

      • http://www.pressecounter.de Renate

        sorry, this part of the code is missing:

        echo ‘<a href=”‘ . get_permalink($post->post_parent) . ‘”&gt’;

        • Samson

          Renate,
          Do you mind copying and paste the entire code again?

        • http://twitter.com/albeirochoa Albeiro Ochoa

          Hi Renate
          Do you mind copying and paste the entire code again……please
          thanks

  • http://www.amburi.com.ar Diego

    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

  • http://www.missdemilo.com Venus

    Thank you! Works like a charm. Super easy to follow.

  • http://www.amydepalma.com Amy

    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?

  • http://emptykngdom.com/main Ricardo

    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

  • Pingback: CSSshow – Premium Gallery Theme (Creative) | GetWP.info

  • Sandra

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

  • Annette

    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)

  • http://www.shoutingwords.com Jitendra

    @Jean: thanks for this post
    @Ozan: thanks for this little snippet..my breadcrumb has become more diverse now… :)

  • Pingback: 5+ Useful Wordpress Breadcrumbs for your Website!

  • http://www.psgam.co.za Ryan

    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.

  • Aaron

    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

    • Aaron

      nm, I figured it out.

  • Cera

    Dear Cats Who Code,

    I am in love with you!!

    Thank you for all your WordPress help!!

    meow!

  • Enjo

    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!!!!!

  • Rodolfo Alvarez

    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?

  • Rodolfo Alvarez

    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

  • http://www.animestatic.com/ Asch

    I tried using it on my website, however all I’m getting is a blank line. Any ideas? Is it that this is now outdated?

  • jaffa

    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

  • Mark

    This no longer seems to work in 2012…can you please update it?

  • http://www.jasonryanftw.com Jason Carbonell

    For those still looking for the fill code, here is a WORKING version with Parent and child categories:

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

  • http://eugenenyawara.com Eugene

    Thanks for the code. But I had to change ‘ the_category(‘title_li=’); ‘ to ‘ the_category(‘ » ‘); ‘ for it to look normal when applied to a category archive. Works well so far; thanks!

  • Karen D.

    I just added the original code to wordpress version 3.4.2 and it works fine.

    Thanks to CatsWhoCode for sharing this. I am another who tries to avoid plugins, but sometimes the explanations for code usage are hard to understand.

  • Fernando

    This is really cool. Everything works except it’s not showing up properly on my archive.php and category.php. On a single page (single.php) it shows like this:

    Site name >> Category Name >> Blog Title

    On the archive page (archive.php) it shows like this (Doesn’t show that you are on the archive page):

    Site name >>

    On the category page (category.php) it shows like this (Doesn’t show that you are on the category page):

    Site name>>

    Can you please help me with this? I’m using WordPress version 3.6.

    PS. I changed … echo “ » “… to … echo “ » ”
    I had to take out the weird character (Â) because it kept showing up on the site.

  • Fernando

    In regards to my earlier post, I wanted to update saying that the category.php is working fine. It’s just archive.php which is not. I think the breadcrumb should show as Site name >> Archives but it does not.

    ===============================================

    This is really cool. Everything works except it’s not showing up properly on my archive.php and category.php. On a single page (single.php) it shows like this:

    Site name >> Category Name >> Blog Title

    On the archive page (archive.php) it shows like this (Doesn’t show that you are on the archive page):

    Site name >>

    On the category page (category.php) it shows like this (Doesn’t show that you are on the category page):

    Site name>>

    Can you please help me with this? I’m using WordPress version 3.6.

    PS. I changed … echo “ » “… to … echo “ » ”
    I had to take out the weird character (Â) because it kept showing up on the site.

  • Cathrine

    I might be a bit ‘late’, but I have tried a lot of solutions and I just can’t figure out how to add more than the three levels, I see many have posted possible solutions, but none of them work properly. And it seems wierd how the overall one seems just to forget ‘the between’ parentpages, instead of adding them to the crumb.. Can anyone hint at a viable solution?

  • Ruffian

    Though this post is old, I found it to be the best for my situation. Very clean and to the point. I do however have one question … how would I display the blog title even when on the home page that displays “Latest Post”. The breadcrumbs are only showing after I view an individual post or category. Thanks!

  • http://www.silverworks.com/ Thomas Cox

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