Loading...

Adding Breadcrumbs inside Posts and Pages in Wordpress

Breadcrumbs are very useful for any particular site not only for a better navigation but for Search engine optimization purpose also. Breadcrumbs can be defined as the footsteps marked when a user reaches a particular page. Lets say a visitor navigates to a post "The Best Plugins" on a site that resides under the category "Plugins", then the breadcrumbs would render the following path to it:

Home > Plugins > The Best Plugins

Normally this pathway of interconnected links is placed under the navigation menu of a site but in wordpress we have full flexibility to place it anywhere we like inside the theme.

Now to custom integrate breadcrumbs inside your theme, first of all you will have to add the following function to your functions.php file that can be found in Appearance > Editor 

Once you have opened up functions.php, copy the following function and paste it at the bottom of functions.php:


function custom_breadcrumbs() {

 /* === OPTIONS === */
 $text['home']     = 'Home'; // text for the 'Home' link
 $text['category'] = 'Archive by Category "%s"'; // text for a category page
 $text['search']   = 'Search Results for "%s" Query'; // text for a search results page
 $text['tag']      = 'Posts Tagged "%s"'; // text for a tag page
 $text['author']   = 'Articles Posted by %s'; // text for an author page
 $text['404']      = 'Error 404'; // text for the 404 page

 $showCurrent = 1; // 1 - show current post/page title in breadcrumbs, 0 - don't show
 $showOnHome  = 0; // 1 - show breadcrumbs on the homepage, 0 - don't show
 $delimiter   = ' / '; // delimiter between crumbs
 $before      = ''; // tag before the current crumb
 $after       = ''; // tag after the current crumb
 /* === END OF OPTIONS === */

 global $post;
 $homeLink = get_bloginfo('url') . '/';
 $linkBefore = '';
 $linkAfter = '';
 $linkAttr = ' rel="v:url" property="v:title"';
 $link = $linkBefore . '%2$s' . $linkAfter;

 if (is_home() || is_front_page()) {

  if ($showOnHome == 1) echo '
';

 } else {

  echo '
' . sprintf($link, $homeLink, $text['home']) . $delimiter; if ( is_category() ) { $thisCat = get_category(get_query_var('cat'), false); if ($thisCat->parent != 0) { $cats = get_category_parents($thisCat->parent, TRUE, $delimiter); $cats = str_replace('', '' . $linkAfter, $cats); echo $cats; } echo $before . sprintf($text['category'], single_cat_title('', false)) . $after; } elseif ( is_search() ) { echo $before . sprintf($text['search'], get_search_query()) . $after; } elseif ( is_day() ) { echo sprintf($link, get_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter; echo sprintf($link, get_month_link(get_the_time('Y'),get_the_time('m')), get_the_time('F')) . $delimiter; echo $before . get_the_time('d') . $after; } elseif ( is_month() ) { echo sprintf($link, get_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter; echo $before . get_the_time('F') . $after; } elseif ( is_year() ) { echo $before . get_the_time('Y') . $after; } elseif ( is_single() && !is_attachment() ) { if ( get_post_type() != 'post' ) { $post_type = get_post_type_object(get_post_type()); $slug = $post_type->rewrite; printf($link, $homeLink . '/' . $slug['slug'] . '/', $post_type->labels->singular_name); if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after; } else { $cat = get_the_category(); $cat = $cat[0]; $cats = get_category_parents($cat, TRUE, $delimiter); if ($showCurrent == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats); $cats = str_replace('', '' . $linkAfter, $cats); echo $cats; if ($showCurrent == 1) echo $before . get_the_title() . $after; } } elseif ( !is_single() && !is_page() && get_post_type() != 'post' && !is_404() ) { $post_type = get_post_type_object(get_post_type()); echo $before . $post_type->labels->singular_name . $after; } elseif ( is_attachment() ) { $parent = get_post($post->post_parent); $cat = get_the_category($parent->ID); $cat = $cat[0]; $cats = get_category_parents($cat, TRUE, $delimiter); $cats = str_replace('', '' . $linkAfter, $cats); echo $cats; printf($link, get_permalink($parent), $parent->post_title); if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after; } elseif ( is_page() && !$post->post_parent ) { if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif ( is_page() && $post->post_parent ) { $parent_id = $post->post_parent; $breadcrumbs = array(); while ($parent_id) { $page = get_page($parent_id); $breadcrumbs[] = sprintf($link, get_permalink($page->ID), get_the_title($page->ID)); $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; } if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after; } elseif ( is_tag() ) { echo $before . sprintf($text['tag'], single_tag_title('', false)) . $after; } elseif ( is_author() ) { global $author; $userdata = get_userdata($author); echo $before . sprintf($text['author'], $userdata->display_name) . $after; } elseif ( is_404() ) { echo $before . $text['404'] . $after; } 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 '
'; } } // end custom_breadcrumbs function

Now that we have the function that will generate the navigation architecture, we need to enable it on our page template as well as post template. We are not limited to only posts or pages, this function can be used in archive template or any other template too.

Open up Appearance > header.php

Since we want these breadcrumbs to be rendered under the menu we will have to find the navigation menu DIV inside the header.php file and place the following code right under the closing DIV tag of the navigation menu:

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

The above code is basically a call to the custom breadcrumbs function that we created earlier in functions.php file Now you will be able to see the breadcrumbs on your website pages. You may style the breadcrumbs text and links to your needs in style.css file

Wordpress Tricks 3755035854809516085

Post a Comment

Please Avoid Spamming. Comments will be moderated before they are published.

emo-but-icon

Home item

Follow by Email

WPReads.com aims to provide everything that can help you master wordpress, I am Farsab, a creative webdev who likes to spread knowledge through writing on different topics such as web development concepts, tutorials, SEO, CSS and much more . Feel free to

Popular Posts