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

9 September 2014

Web Development

Sanjay Bhowmick

Tags:

WordPress

Comments

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

Francisco

9 December 2010

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!

Reply
Kurt

7 January 2011

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!

Reply
Christopher Sample

14 May 2012

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

Reply
1. Christopher Sample
  
  14 May 2012
  
  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 ''; } }
  
  Reply
  1. Christopher Sample
    
    14 May 2012
    
    Actually that didn’t show up right, heres the link
    
    http://www.studiolxv.com/laboratory/wp-functions-breadcrumbs.txt
    
    Reply
KPCTA

14 June 2012

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.

Reply
nur1952

30 January 2013

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

Reply
Sanjay Bhowmick

17 February 2013

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

Reply
dheeraj sharma

8 June 2017

breadcrumbs are good for seo ?

Reply
1. Sanjay Bhowmick
  
  19 June 2017
  
  Breadcrumbs were created for easy navigation. I have no idea how SEO is related to breadcrumbs.
  
  Reply

How to Create Simple WordPress Breadcrumbs?

Comments

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

Leave a Reply Cancel reply