Hi, I'm a web developer and blogger from Russia. My nickname is Dimox.
Sorry for my English, it's not my native. Read more about me and my blog.

Wordpress Breadcrumbs Without a Plugin

301109'
Wordpress Breadcrumbs Without a Plugin
23 Comments
Written by Dimox

Breadcrumbs is an important element of a web site navigation, which boosts his usability. Especially it concerns to a sites with a complex structure. Unfortunatelly, I don’t use breadcrumbs on my sites, may be because their structure is very simple or because I could not find a way of making breadcrumbs, suitable for me.

I have seen a different ways of a breadcrumbs implementation on WordPress sites, but not one of them I does not like, because all of them does not display a full chain of links. So I have created my version of WordPress breadcrumbs without a plugin.

Yes, there is a ready plugins for WordPress breadcrumbs, but I prefer to use a short code snippets, which doing the same.

Features of my version of WordPress breadcrumbs

  • Displays a full chain of links to the current page. For example, if the current post is in a second level category, so breadcrumbs will looks like this:

    Home » Category » Subcategory » Post Name

    But all, what I have seen, displays only such an option (excluding plugins):

    Home » Subcategory » Post name

    The same applies to pages and subpages. For example, for a 3rd level page breadcrumbs will looks like this:

    Home » Page Level 1 » Page Level 2 » Page Level 3

  • Breadcrumbs is appearing on a following types of WordPress pages:

    • paged navigation from a home page (like sitename.com/page/2/);
    • category archive;
    • tag archive;
    • daily archive;
    • monthly archive;
    • yearly archive;
    • author archive;
    • single post page;
    • single page;
    • search reasults;
    • 404 error page.

  • adding a page number (if archive page is second or more);

  • custom symbol of delimiter;

  • custom text for a ‘Home’ link;

  • current crumb styling.

WordPress breadcrumbs function code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

function dimox_breadcrumbs() {
 
  $delimiter = '»';
  $name = 'Home'; //text for the 'Home' link
  $currentBefore = '<span class="current">';
  $currentAfter = '</span>';
 
  if ( !is_home() && !is_front_page() || is_paged() ) {
 
    echo '<div id="crumbs">';
 
    global $post;
    $home = get_bloginfo('url');
    echo '<a href="' . $home . '">' . $name . '</a> ' . $delimiter . ' ';
 
    if ( is_category() ) {
      global $wp_query;
      $cat_obj = $wp_query->get_queried_object();
      $thisCat = $cat_obj->term_id;
      $thisCat = get_category($thisCat);
      $parentCat = get_category($thisCat->parent);
      if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
      echo $currentBefore . 'Archive by category &#39;';
      single_cat_title();
      echo '&#39;' . $currentAfter;
 
    } elseif ( is_day() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
      echo $currentBefore . get_the_time('d') . $currentAfter;
 
    } elseif ( is_month() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo $currentBefore . get_the_time('F') . $currentAfter;
 
    } elseif ( is_year() ) {
      echo $currentBefore . get_the_time('Y') . $currentAfter;
 
    } elseif ( is_single() ) {
      $cat = get_the_category(); $cat = $cat[0];
      echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
      echo $currentBefore;
      the_title();
      echo $currentAfter;
 
    } elseif ( is_page() && !$post->post_parent ) {
      echo $currentBefore;
      the_title();
      echo $currentAfter;
 
    } elseif ( is_page() && $post->post_parent ) {
      $parent_id  = $post->post_parent;
      $breadcrumbs = array();
      while ($parent_id) {
        $page = get_page($parent_id);
        $breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
        $parent_id  = $page->post_parent;
      }
      $breadcrumbs = array_reverse($breadcrumbs);
      foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
      echo $currentBefore;
      the_title();
      echo $currentAfter;
 
    } elseif ( is_search() ) {
      echo $currentBefore . 'Search results for &#39;' . get_search_query() . '&#39;' . $currentAfter;
 
    } elseif ( is_tag() ) {
      echo $currentBefore . 'Posts tagged &#39;';
      single_tag_title();
      echo '&#39;' . $currentAfter;
 
    } elseif ( is_author() ) {
       global $author;
      $userdata = get_userdata($author);
      echo $currentBefore . 'Articles posted by ' . $userdata->display_name . $currentAfter;
 
    } elseif ( is_404() ) {
      echo $currentBefore . 'Error 404' . $currentAfter;
    }
 
    if ( get_query_var('paged') ) {
      if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
      echo __('Page') . ' ' . get_query_var('paged');
      if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
    }
 
    echo '</div>';
 
  }
}

Simply paste this function into a functions.php file of your theme and then paste the following code in a place of your theme, where breadcrumbs must appearing:

<?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?>

All that remains to do for now, is to design your breadcrumbs with CSS. You can use #crumbs for styling breadcrumbs block and #crumbs .current for styling a current crumb.

Function works on WordPress 2.5 or higher.

Category: WordPress
Tagged with: , ,

Comments on: "Wordpress Breadcrumbs Without a Plugin" (23)

  1. December 8, 2009 at 3:14 am
    Stanley @ SEOAdsenseThemes.com said:

    Thank you for the code Dimox. It’s working well for me so far.

    Reply
  2. December 18, 2009 at 6:49 am
    Veera said:

    Explained very well.

    Reply
  3. December 20, 2009 at 10:29 am
    satya prakash said:

    Similar post is expected from me very soon. possibly tomorrow.

    Reply
  4. January 7, 2010 at 1:40 pm
    fenny said:

    so easy,, thx for sharing.

    Reply
  5. January 8, 2010 at 3:13 am
    Aboubaker Nour said:

    Thank you very much…

    Reply
  6. January 10, 2010 at 3:55 pm
    Fabiola said:

    Excelente explicación, incluso para los que no tenemos el ingles como lengua nativa.

    Gracias.

    Reply
  7. January 14, 2010 at 1:43 pm
    coda said:

    One problem: doesn’t work for a single post if the post is contained in multiple categories, because you’re using get_category_parents() which will list all the sub-categories and not just the one currently applicable.

    Reply
  8. @
    January 26, 2010 at 7:02 am
    Terry said:

    Very well done. I’ve looked (and tried) three other codes and your’s is the best, easiest and most complete bread crumb for WordPress.

    I use a custom home page so I get Home > Home but I just changed the 2nd line in the function to $name = ‘You are here &raquo Front Page’;

    Thanks Dimox!

    Reply
  9. @
    January 26, 2010 at 7:18 am
    Terry said:

    Dimox,

    Here’s a question as I’ve been testing out your code:

    1) how to “strong” the last breadcrumb (current crumb)

    2) special 404.php error page breadcrumb (”sorry, we’ll check into this”)

    Looking forward to your help!

    Reply
    • January 26, 2010 at 8:00 am
      Dimox said:

      1) how to “strong” the last breadcrumb (current crumb)

      It’s necessary to make a row of change in the whole function. I will update the code as soon as I find a time (may be on this weekend).

      2) special 404.php error page breadcrumb (”sorry, we’ll check into this”)

      Yes, I wanted to add this earlier, but forgot. Will be done soon.

      Thanks for your comments.

      Reply
    • January 31, 2010 at 2:55 am
      Dimox said:

      I’ve updated the function. Now you can use .current class for styling a current crumb.

      Reply
  10. @
    February 13, 2010 at 1:52 pm
    Michael said:

    Hi Dimox – this is a great solution, very simple and lightweight to implement.

    Can you suggest a tweak which would result in the breadcrumb just showing Home rather than Home > Home on the home page when using a custom home page?

    Thanks

    Reply
  11. @
    February 14, 2010 at 12:11 pm
    Michael said:

    Hi Dimox

    I’ve been playing around with the code to find a solution to the issue I posted above. I just added an if loop to display only the home link (without delimiter) if the page is the front page. Then separated out the home link (with delimiter) as a separate string (I’ve called it $homelink) and echoed it out before the other breadcrumbs stuff for all the other types of page. This seems to work fine on my site and might be useful to others using a custom home page.

    Unfortunately the code doesn’t seem to display properly in the comments here when added with the code button (at least not in preview), so I can’t post it here but I can email the code I have come up with you’d like to have a look?

    Reply
    • February 19, 2010 at 6:05 am
      Dimox said:

      I have made only one change, in this row:

      if ( !is_home() || !is_front_page() || is_paged() ) {

      I’ve replaced the first || on &&.

      The goal of this changing – do not display breadcrumbs on the homepage, because, IMHO, there is no need to show it there.

      Reply
  12. @
    February 23, 2010 at 10:07 am
    Marty Martin said:

    Hi Dimox,

    I modded your code a bit to let it work on WordPress Mu as site-wide breadcrumbs. Anyone interested in the solution feel free to use it and thanks to Dimox for a great function!

    http://seoserpent.com/wpmu-sitewide-breadcrumbs-2010

    Reply
  13. @
    February 23, 2010 at 1:03 pm
    Mapics said:

    Thank you very much

    Reply

Leave a comment





Tag Cloud