Breadcrumbs are the important part of every website for easy navigation. Here is a simple WordPress custom breadcrumbs without plugin code which you can copy and paste to `functions.php` file of your active theme. More ever you will also find some easily configurable options to modify breadcrumbs to match your site’s look and feel in this WordPress custom breadcrumb.
The following code will have breadcrumbs working on your site in no time. Just add this below code into your current wordpress theme’s `functions.php` file and call the second step where you want to place breadcrumb in your template.
//wordpress custom breadcrumbs without plugin
// start ft_custom_breadcrumb
function ft_custom_breadcrumbs(array $options = array() ) {
// default values assigned to options
$options = array_merge(array(
'crumbId' => 'nav_crumb', // id for the breadcrumb Div
'crumbClass' => 'nav_crumb', // class for the breadcrumb Div
'beginningText' => 'You are here :', // text showing before breadcrumb starts
'showOnHome' => 1,// 1 - show breadcrumbs on the homepage, 0 - don't show
'delimiter' => ' > ', // delimiter between crumbs
'homePageText' => 'Home', // text for the 'Home' link
'showCurrent' => 1, // 1 - show current post/page title in breadcrumbs, 0 - don't show
'beforeTag' => '<span class="current">', // tag before the current breadcrumb
'afterTag' => '</span>', // tag after the current crumb
'showTitle'=> 1 // showing post/page title or slug if title to show then 1
), $options);
$crumbId = $options['crumbId'];
$crumbClass = $options['crumbClass'];
$beginningText = $options['beginningText'] ;
$showOnHome = $options['showOnHome'];
$delimiter = $options['delimiter'];
$homePageText = $options['homePageText'];
$showCurrent = $options['showCurrent'];
$beforeTag = $options['beforeTag'];
$afterTag = $options['afterTag'];
$showTitle = $options['showTitle'];
global $post;
$wp_query = $GLOBALS['wp_query'];
$homeLink = get_bloginfo('url');
echo '<div id="'.$crumbId.'" class="'.$crumbClass.'" >'.$beginningText;
if (is_home() || is_front_page()) {
if ($showOnHome == 1)
echo $beforeTag . $homePageText . $afterTag;
} else {
echo '<a href="' . $homeLink . '">' . $homePageText . '</a> ' . $delimiter . ' ';
if ( is_category() ) {
$thisCat = get_category(get_query_var('cat'), false);
if ($thisCat->parent != 0) echo get_category_parents($thisCat->parent, TRUE, ' ' . $delimiter . ' ');
echo $beforeTag . 'Archive by category "' . single_cat_title('', false) . '"' . $afterTag;
} elseif ( is_tax() ) {
$term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) );
$parents = array();
$parent = $term->parent;
while ( $parent ) {
$parents[] = $parent;
$new_parent = get_term_by( 'id', $parent, get_query_var( 'taxonomy' ) );
$parent = $new_parent->parent;
}
if ( ! empty( $parents ) ) {
$parents = array_reverse( $parents );
foreach ( $parents as $parent ) {
$item = get_term_by( 'id', $parent, get_query_var( 'taxonomy' ));
echo '<a href="' . get_term_link( $item->slug, get_query_var( 'taxonomy' ) ) . '">' . $item->name . '</a>' . $delimiter;
}
}
$queried_object = $wp_query->get_queried_object();
echo $beforeTag . $queried_object->name . $afterTag;
} elseif ( is_search() ) {
echo $beforeTag . 'Search results for "' . get_search_query() . '"' . $afterTag;
} 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 $beforeTag . get_the_time('d') . $afterTag;
} elseif ( is_month() ) {
echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo $beforeTag . get_the_time('F') . $afterTag;
} elseif ( is_year() ) {
echo $beforeTag . get_the_time('Y') . $afterTag;
} elseif ( is_single() && !is_attachment() ) {
if($showTitle)
$title = get_the_title();
else
$title = $post->post_name;
if ( get_post_type() == 'product' ) { // it is for custom post type with custome taxonomies like
//Breadcrumb would be : Home Furnishings > Bed Covers > Cotton Quilt King Kantha Bedspread
// product = Cotton Quilt King Kantha Bedspread, custom taxonomy product_cat (Home Furnishings -> Bed Covers)
// show product with category on single page
if ( $terms = wp_get_object_terms( $post->ID, 'product_cat' ) ) {
$term = current( $terms );
$parents = array();
$parent = $term->parent;
while ( $parent ) {
$parents[] = $parent;
$new_parent = get_term_by( 'id', $parent, 'product_cat' );
$parent = $new_parent->parent;
}
if ( ! empty( $parents ) ) {
$parents = array_reverse($parents);
foreach ( $parents as $parent ) {
$item = get_term_by( 'id', $parent, 'product_cat');
echo '<a href="' . get_term_link( $item->slug, 'product_cat' ) . '">' . $item->name . '</a>' . $delimiter;
}
}
echo '<a href="' . get_term_link( $term->slug, 'product_cat' ) . '">' . $term->name . '</a>' . $delimiter;
}
echo $beforeTag . $title . $afterTag;
} elseif ( get_post_type() != 'post' ) {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
echo '<a href="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . '</a>';
if ($showCurrent == 1) echo ' ' . $delimiter . ' ' . $beforeTag . $title . $afterTag;
} else {
$cat = get_the_category(); $cat = $cat[0];
$cats = get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
if ($showCurrent == 0) $cats = preg_replace("#^(.+)\s$delimiter\s$#", "$1", $cats);
echo $cats;
if ($showCurrent == 1) echo $beforeTag . $title . $afterTag;
}
} elseif ( !is_single() && !is_page() && get_post_type() != 'post' && !is_404() ) {
$post_type = get_post_type_object(get_post_type());
echo $beforeTag . $post_type->labels->singular_name . $afterTag;
} elseif ( is_attachment() ) {
$parent = get_post($post->post_parent);
$cat = get_the_category($parent->ID); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
echo '<a href="' . get_permalink($parent) . '">' . $parent->post_title . '</a>';
if ($showCurrent == 1) echo ' ' . $delimiter . ' ' . $beforeTag . get_the_title() . $afterTag;
} elseif ( is_page() && !$post->post_parent ) {
$title =($showTitle)? get_the_title():$post->post_name;
if ($showCurrent == 1) echo $beforeTag . $title . $afterTag;
} 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);
for ($i = 0; $i < count($breadcrumbs); $i++) {
echo $breadcrumbs[$i];
if ($i != count($breadcrumbs)-1) echo ' ' . $delimiter . ' ';
}
$title =($showTitle)? get_the_title():$post->post_name;
if ($showCurrent == 1) echo ' ' . $delimiter . ' ' . $beforeTag . $title . $afterTag;
} elseif ( is_tag() ) {
echo $beforeTag . 'Posts tagged "' . single_tag_title('', false) . '"' . $afterTag;
} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $beforeTag . 'Articles posted by ' . $userdata->display_name . $afterTag;
} elseif ( is_404() ) {
echo $beforeTag . 'Error 404' . $afterTag;
}
if ( get_query_var('paged') ) {
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() || is_tax() ) echo ' (';
echo __('Page') . ' ' . get_query_var('paged');
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() || is_tax() ) echo ')';
}
}
echo '</div>';
}
// end ft_custom_breadcrumb
STEP 2 : Use below code where you want to show breadcrumb.
if (function_exists('ft_custom_breadcrumbs')) {
ft_custom_breadcrumbs();
}In this function, We can change following default settings
// default values assigned to options
‘crumbId‘ = ‘nav_crumb’ // id for the breadcrumb Div
‘crumbClass‘ = ‘nav_crumb’ // class for the breadcrumb Div
‘beginningText‘ = ‘You are here :’ // text showing before breadcrumb starts
‘showOnHome‘ = 1 // 1 – show breadcrumbs on the homepage, 0 – don’t show
‘delimiter‘ = ‘ > ‘ // delimiter between crumbs
‘homePageText‘ = ‘Home’, // text for the ‘Home’ link
‘showCurrent‘ = 1, // 1 – show current post/page title in breadcrumbs, 0 – don’t show
‘beforeTag‘ = ‘<span class=”current”>’, // tag before the current breadcrumb
‘afterTag‘ = ‘</span>’ // tag after the current crumb
‘showTitle‘ = 1’ // 1 – show current post/page title , 0 – show slug
by passing array of options like
if (function_exists('ft_custom_breadcrumbs')) {
// passing options as array
$args = array(
'beginningText' => 'Currently watching: ',
'delimiter' => ' :: '
)
ft_custom_breadcrumbs($args);
}There are loads of WordPress plugins out there that can handle breadcrumbs for you, they are not always the best option as they can often get things wrong and end up being more hassle than they are worth. I hope WordPress custom breadcrumbs without plugin code in this article will provide you a hassle free and best suitable custom breadcrumb.
This breadcrumbs code is great:) One question – I’m building an ‘ajaxfied’ theme (living here at the moment: http://www.deploi.co.uk/about/) The normal menu changes after load (through change of classes). Is there any way I can reload the breadcrumb; maybe through ajax or update the php function between page loads? Apologies my PHP/JS skills are a bit mediocre.
Hi Simon,
I have checked the link you provided and need more information. What are you changing in breadcrumb & is there any difference between breadcrumbs initially loaded vs requested again. I think there is no requirement to get breadcrumb again and can be re-arrange as you required using JS. You can also explain us to support@fellowtuts.com
Hi Amit, thanks for your speedy reply:)
Yes, its mainly a JS job, as I’ve ‘ajaxified’ the wp site; using the following .js file:
http://deploi.co.uk/site/wp-content/themes/deploi/assets/js/ajaxify-html5.js
Meaning I’ll need to change the various classes between page transitions
There are bits of js that evidently do this for the standard wp menu: (have a look at the file) – snippet of code:
$menuChildren = $menu.find(menuChildrenSelector);
$menuChildren.filter(activeSelector).removeClass(activeClass);
$menuChildren = $menuChildren.has('a[href^="'+relativeUrl+'"],a[href^="/'+relativeUrl+'"],a[href^="'+url+'"]');
if ( $menuChildren.length === 1 ) { $menuChildren.addClass(activeClass); }
I just wonder how to go about this for a breadcrumb though. As I guess it would be a case of adding & removing ‘crumbs’?
I appreciate this might be quite a bit of work, and I can work around it by placing the breadcrumb in the php templates that are replaced by the ajax
Was just wondering if you might have a simple solution?
Thanks again for your swift reply – and code:)
Hi Simon,
Sorry for being late. I am also sorry that I your requirement is still uncleared to me. I viewed the code but could not understand what do you actually want to implement in your breadcrumb by altering the code and list of classes along with when and where you wish to alter. Please mail us at support@fellowtuts.com with clear details and images for current & expected breadcrumb would be bonus.
Thanks
This is the best breadcrumbs code I have found after searching far and wide. The only issue I’m having is it is not showing child custom taxonomies for me. For instance, my custom taxonomy ‘collections’ has Ancient Coin then child taxonomies of Silver Coins and Gold Coins. When I am viewing a single item (custom post type), it only shows the top level taxonomy of ‘Ancient Coin’. Is there any way to include taxonomy children or all of the custom taxonomy terms?
Hi joshuaiz,
Your requirement might need some customization in code. If you would like us to do so, please write us at support@fellowtuts.com
Thanks for sharing! Worked really well for custom taxonomies and post types.
Perfectly implemented in my blog. Thanks a lot
thanks for the code, this works really well right off the bat.
Hey thanks for this. One question – Is there a way to call the page/post slug instead of the title?
We have updated our code to show title or slug. You can pass ‘showTitle’=> 0 in step 2 to show current page/post slug
Thanks for that. Much appreciated!