How to Create Simple WordPress Breadcrumbs?

Breadcrumbs is a navigation aid used in user interfaces. It gives users a way to keep track of their locations within programs or documents. Breadcrumbs typically appear horizontally across the top of a web page, usually below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one.

You can use Breadcrumbs feature in your WordPress post page or content page to show the hierarchy.

Home » Parent Page » Sub Page1 » Sub Page2
Home » Category » Subcategory » Post Name

Step 1: In your function.php file put the following code for Breadcrumbs.

Step 2: In the header.php or in your theme page put the following code to display the Breadcrumbs.

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

Step 3: 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.

You may also like

11 Comments

  1. Hello there. I loved this post, and the solution provided here is really great!

    I am trying to implement a simpler version (pages only) in one of my sites, and I was wondering if there would be a way to limit the depth of the function, so as not to display the first page levels. For instance, at the lowest hierarchical level, the breadcrumb would display:

    In a two-level structure: Level 2 page title (current);

    In a three-level structure: Level 2 page title >> Level 3 page title (current);

    In a four-level structure: Level 2 page title >> Level 3 page title >> Level 4 page title (current); etc.

    I posted the simplified version of the code (along with a link to this post) in this thread I opened in the WordPress Forums. If you could me some pointers as to how to accomplish this I would REALLY appreciate it.

    Thanks in advanced!

  2. How do you get it to display the PAGE, not the page's Title? For example, the URL would be:

    http://www.example.com/cat-one/sub-cat1/page

    I want Ex:

    Home > Cat-One > Sub-Cat1 > Page (current)

    Instead of Ex:

    Home > This is the title for Cat-One > This is the title for Sub-Cat1 >Page Title of Page (current)

    My title's are much longer than my page (URL) names. I know it can be done using PHP (with $_SERVER[request_URI]), which works on my non-WP page (locally), but I can't find a plugin or function that displays the pages rather than the page titles for WP. Either will work for me.

    Thanks for the help!

    1. function wordpress_breadcrumbs() {

      $delimiter = '';
      $name = 'Home'; //text for the 'Home' link
      $currentBefore = '';
      $currentAfter = '';

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

      echo '';

      global $post;
      $home = get_bloginfo('url');
      echo '' . $name . ' ' . $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 ;
      echo single_cat_title();
      echo $currentAfter;

      } elseif ( is_day() ) {
      echo '' . get_the_time('Y') . ' ' . $delimiter . ' ';
      echo '' . get_the_time('F') . ' ' . $delimiter . ' ';
      echo $currentBefore . get_the_time('d') . $currentAfter;

      } elseif ( is_month() ) {
      echo '' . get_the_time('Y') . ' ' . $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, FALSE, ' ' . $delimiter . '');
      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[] = 'ID) . '">' . get_the_title($page->ID) . '';
      $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 '' . get_search_query() . ''' . $currentAfter;

      } elseif ( is_tag() ) {
      echo $currentBefore . 'Posts tagged '';
      single_tag_title();
      echo ''' . $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 '';

      }
      }

  3. Thanks for quick lesson, but I have one problem.
    For every page i get
    Home>Page one
    Home>Page two

    I want to have for this structure:
    Level 1 (just menu link)
    Level 2.1 (page)
    Level 2.2 (page)

    this:

    Level 1 > Level 2.1
    Level 1 > Level 2.2

    Instead I got

    Home > Level 2.1
    Home > Level 2.2

    How can i solve this problem

    Thank you in advance.

  4. Don’t know why but getting Parse error: syntax error, unexpected T_STRING in your code. I have shared last couple of php codes along with your codes. Please help me solve the problem out.

    if ( ! function_exists( ‘customisetheme_admin_header_style’ ) ) :
    //Function fired and inline styles added to the admin panel

    //Customise as required
    function customisetheme_admin_header_style() {
    // do nothing
    }
    endif;

    //Execute our custom theme functionality
    add_action( ‘after_setup_theme’, ‘customisetheme_setup’);

    if ( ! function_exists( ‘wordpress_breadcrumbs’ ) ) :

    // function for page hierarchy

    function wordpress_breadcrumbs() {
     
      $delimiter = ‘»’;
      $name = ‘Home’; //text for the ‘Home’ link
      $currentBefore = ”;
      $currentAfter = ”;
     
      if ( !is_home() && !is_front_page() || is_paged() ) {
     
        echo ”;
     
        global $post;
        $home = get_bloginfo(‘url’);
        echo ‘‘ . $name . ‘ ‘ . $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 '’;
          single_cat_title();
          echo ‘'’ . $currentAfter;
     
        } elseif ( is_day() ) {
          echo ‘‘ . get_the_time(‘Y’) . ‘ ‘ . $delimiter . ‘ ‘;
          echo ‘‘ . get_the_time(‘F’) . ‘ ‘ . $delimiter . ‘ ‘;
          echo $currentBefore . get_the_time(‘d’) . $currentAfter;
     
        } elseif ( is_month() ) {
          echo ‘‘ . get_the_time(‘Y’) . ‘ ‘ . $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[] = ‘ID) . ‘”>’ . get_the_title($page->ID) . ‘‘;
            $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 '’ . get_search_query() . ‘'’ . $currentAfter;
     
        } elseif ( is_tag() ) {
          echo $currentBefore . ‘Posts tagged '’;
          single_tag_title();
          echo ‘'’ . $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 ”;
     
      }
    }
    endif;

    //Execute our custom theme functionality
    add_action( ‘init’, ‘wordpress_breadcrumbs’);

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.