0

Use Bootstrap Breadcrumbs to your WordPress Theme

Breadcrumbs are too popular in modern websites, so i am going to share wordpress custom breadcrumb funtion styled with twitter bootsrap style Add the following code in you function.php

[code language=”php”]
<?php

function sp_breadcrumbs() {

$showOnHome = 0; // 1 – show breadcrumbs on the homepage, 0 – don’t show
$delimiter = ‘<span class="divider">/</span>’; // delimiter between crumbs
$home = ‘Home’; // text for the ‘Home’ link
$showCurrent = 1; // 1 – show current post/page title in breadcrumbs, 0 – don’t show
$before = ‘<li class="active"><span class="current">’; // tag before the current crumb
$after = ‘</span></li>’; // tag after the current crumb

global $post;
$homeLink = get_bloginfo(‘url’);

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

if ($showOnHome == 1) echo ‘<ul class="breadcrumb"><li><a href="’ . $homeLink . ‘">’ . $home . ‘</a></li></ul>’;

} else {

echo ‘<ul class="breadcrumb"><li><a href="’ . $homeLink . ‘">’ . $home . ‘</a> ‘ . $delimiter . ‘</li> ‘;

if ( is_category() ) {
$thisCat = get_category(get_query_var(‘cat’), false);
if ($thisCat->parent != 0) echo get_category_parents($thisCat->parent, TRUE, ‘ ‘ . $delimiter . ‘ ‘);
echo $before . ” . single_cat_title(”, false) . ” . $after;

} elseif ( is_search() ) {
echo $before . ‘Search results for "’ . get_search_query() . ‘"’ . $after;

} elseif ( is_day() ) {
echo ‘<li><a href="’ . get_year_link(get_the_time(‘Y’)) . ‘">’ . get_the_time(‘Y’) . ‘</a> ‘ . $delimiter . ‘</li> ‘;
echo ‘<li><a href="’ . get_month_link(get_the_time(‘Y’),get_the_time(‘m’)) . ‘">’ . get_the_time(‘F’) . ‘</a> ‘ . $delimiter . ‘</li> ‘;
echo $before . get_the_time(‘d’) . $after;

} elseif ( is_month() ) {
echo ‘<li><a href="’ . get_year_link(get_the_time(‘Y’)) . ‘">’ . get_the_time(‘Y’) . ‘</a> ‘ . $delimiter . ‘</li> ‘;
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;
echo ‘<li><a href="’ . $homeLink . ‘/’ . $slug[‘slug’] . ‘/">’ . $post_type->labels->singular_name . ‘</a>’;
if ($showCurrent == 1) echo ‘ ‘ . $delimiter . ‘</li> ‘ . $before . get_the_title() . $after;
} else {
$cat = get_the_category(); $cat = $cat[0];
$cats = get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘</li> ‘);
if ($showCurrent == 0) $cats = preg_replace("#^(.+)s$delimiters$#", "$1", $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];
echo get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘</li> ‘);
echo ‘<li><a href="’ . get_permalink($parent) . ‘">’ . $parent->post_title . ‘</a>’;
if ($showCurrent == 1) echo ‘ ‘ . $delimiter . ‘</li> ‘ . $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[] = ‘<li><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 . ‘</li> ‘;
}
if ($showCurrent == 1) echo ‘ ‘ . $delimiter . ‘</li> ‘ . $before . get_the_title() . $after;

} elseif ( is_tag() ) {
echo $before . ‘Posts tagged "’ . single_tag_title(”, false) . ‘"’ . $after;

} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $before . ‘Articles posted by ‘ . $userdata->display_name . $after;

} elseif ( is_404() ) {
echo $before . ‘Error 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 ‘</ul>’;

}
} // end dimox_breadcrumbs()

?>
[/code]

Use the following code in your template file

[code language=”php”]
<?php if(function_exists(‘sp_breadcrumbs’)) sp_breadcrumbs(); ?>
[/code]

Use following style to make it more preety

[code language=”css”]
.breadcrumb {
  padding: 7px 14px;
  margin: 0 0 18px;
  list-style: none;
  background-color: #fbfbfb;
  background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
  background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5));
  background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
  background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
  background-image: linear-gradient(top, #ffffff, #f5f5f5);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#f5f5f5′, GradientType=0);
  border: 1px solid #ddd;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 0 #ffffff;
  -moz-box-shadow: inset 0 1px 0 #ffffff;
  box-shadow: inset 0 1px 0 #ffffff;
  }

.breadcrumb li {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */

  *zoom: 1;
  text-shadow: 0 1px 0 #ffffff;
  }

.breadcrumb .divider {
  padding: 0 5px;
  color: #999999;
  }

.breadcrumb .active a {
  color: #333333;
  }

[/code]

Sandeep Kumar

Sandeep kumar is a web developer and a professinal blogger. He works for latest technologies and write articles what he learn. In ICodeHub he share web languages tutorials and other programming tips and tricks. if you need some help or have some suggestion then mail him at sandeep92pal@gmail.com without any hesitation. He believes in learning and sharing.