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.

Related Posts

No related posts.
 

36 Comments

  1. blake
    Posted June 23, 2008 at 10:44 pm | Permalink

    Very useful tip, thanks for sharing!

  2. Posted June 30, 2008 at 9:10 am | Permalink

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

  3. Posted July 12, 2008 at 6:52 am | Permalink

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

  4. Posted July 12, 2008 at 7:40 am | Permalink

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

  5. Posted July 13, 2008 at 3:33 am | Permalink

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

  6. Posted July 13, 2008 at 2:01 pm | Permalink

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

  7. Posted August 17, 2008 at 8:08 am | Permalink

    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. Posted August 17, 2008 at 8:23 am | Permalink

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

  9. Posted August 23, 2008 at 5:13 pm | Permalink

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

  10. Posted August 23, 2008 at 5:29 pm | Permalink

    This really helped me. Thanks.

  11. Posted August 27, 2008 at 1:59 am | Permalink

    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

  12. Posted August 27, 2008 at 9:44 am | Permalink

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

  13. Posted August 27, 2008 at 4:22 pm | Permalink

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

  14. Posted October 31, 2008 at 3:56 am | Permalink

    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!

  15. Posted October 31, 2008 at 8:35 am | Permalink

    @Samsara:

    /* my code */
    if {

    }
    /* put Ozan’s code here */

    ;)

  16. Posted October 31, 2008 at 1:00 pm | Permalink

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

  17. Posted November 14, 2008 at 2:01 pm | Permalink

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

  18. Posted February 18, 2009 at 9:43 am | Permalink

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

  19. Posted March 10, 2009 at 12:59 pm | Permalink

    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

  20. Posted March 13, 2009 at 2:00 pm | Permalink

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

  21. Posted March 22, 2009 at 9:12 am | Permalink

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

  22. christopher
    Posted April 19, 2009 at 11:41 am | Permalink

    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

  23. Posted May 19, 2009 at 8:48 pm | Permalink

    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

  24. Posted June 19, 2009 at 6:41 pm | Permalink

    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.

  25. Posted September 22, 2009 at 6:04 am | Permalink

    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.

  26. Dave
    Posted October 22, 2009 at 1:19 am | Permalink

    This doesn’t work if there are nested subcategories.

  27. Posted November 9, 2009 at 4:59 pm | Permalink

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

  28. Posted December 28, 2009 at 12:31 am | Permalink

    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?

  29. Anna B.
    Posted December 29, 2009 at 7:53 pm | Permalink

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

  30. Posted January 4, 2010 at 1:05 pm | Permalink

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

  31. Posted January 9, 2010 at 9:35 am | Permalink

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

  32. Posted January 13, 2010 at 6:29 am | Permalink

    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.

  33. Posted January 22, 2010 at 2:31 am | Permalink

    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.

  34. Samson
    Posted February 18, 2010 at 12:02 pm | Permalink

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

  35. alex
    Posted February 26, 2010 at 8:19 am | Permalink

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

  36. Cron
    Posted March 5, 2010 at 10:26 pm | Permalink

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

21 Trackbacks

  1. [...] How to: Breadcrumb function for Wordpress – [...]

  2. By WordPress Talk - August 28, 2008 on August 29, 2008 at 1:01 am

    [...] How to Build Breadcrumbs Into Your Blog – Jean-Baptiste Jung explains how to build breadcrumbs into your WordPress blog without the need of a WordPress plugin. [...]

  3. [...] How To: Breadcrumb Function for WordPress [...]

  4. [...] via:catswhocode [...]

  5. By WPTUT - Wordpress Tutorials on November 23, 2008 at 4:40 am

    [...] Breadcrumb function for Wordpress Submitted by: catswhocode| Date: 11 21st, 2008 | Category: Functions Views: 1 | Votes: 0 | [...]

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

  7. [...] Breadcrumb [...]

  8. By Breadcrumb trails in Wordpress » malcolm coles on January 7, 2009 at 2:16 am

    [...] This method works, but I think if you have categories only – if you have sub-categories, it doesn’t include both parent and child categories. [...]

  9. [...] Learn how to create this navigation technique, and display it on our posts, pages and categories archives in your WordPress theme. You can also use this great plugin or this interesting one to automatically create breadcrumbs in your blog. [...]

  10. [...] How to: Breadcrumb function for Wordpress [...]

  11. By Wordpress Breadcrumbs | Arvind Andrion on August 18, 2009 at 6:57 am

    [...] Simply adding this php code in your function.php and call it in the page. Posted by Jean-Baptiste Jung in catswhocode.com [...]

  12. [...] Der orginal Artikel stammt von “Cats who Code” und ist hier zu lesen: http://www.catswhocode.com/blog/how-to-breadcrumb-function-for-wordpress [...]

  13. [...] Catswhocode.com nos muestran como insertar breadcrumbs sin plugin. Busquemos el archivo functions.php de nuestro [...]

  14. [...] [via : CatsWhoCode] [...]

  15. By 5 Quick Tweaks To Improve Your Wordpress Blog on December 22, 2009 at 3:15 am

    [...] Again, this would also need a touch of CSS styling in order to remove the ugly from it. Source [...]

  16. [...] 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. [...]

  17. [...] pour le faire. C’est cette seconde option que nous avons choisie, et nous sommes parti de la fonction proposée par Cats who code, qui a une limite : elle n’affiche que la racine et la page en cours. La fonction que nous [...]

  18. [...] How to: Breadcrumb function for Wordpress [...]

  19. [...] navigate through your site much quicker. There are WordPress plugins for breadcrumbs, but thanks to Cats Who Code, we now know how to add a breadcrumb function into our WordPress [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting

  • Smashing Network
WordPress Appliance - Powered by TurnKey Linux