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.
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 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 | //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.
1 2 3 | 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
1 2 3 4 5 6 7 8 | 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!