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.


Posted

in

by

Tags:

Comments

10 responses to “How to Create Simple WordPress Breadcrumbs?”

  1. Francisco avatar

    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. Kurt avatar

    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!

  3. Christopher Sample avatar

    I used your code and modified it to have a ul with id crumbs and li’s within: heres the code if it would help anyone

    1. Christopher Sample avatar

      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 '';

      }
      }

  4. KPCTA avatar
    KPCTA

    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.

  5. nur1952 avatar

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

  6. Sanjay Bhowmick avatar

    This Breadcrumb function is old enough. I am working on a updated one. I will write a post for this.

  7. dheeraj sharma avatar

    breadcrumbs are good for seo ?

    1. Sanjay Bhowmick avatar
      Sanjay Bhowmick

      Breadcrumbs were created for easy navigation. I have no idea how SEO is related to breadcrumbs.

Leave a Reply

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