Install Rich Snippets Breadcrumbs into WordPress

Breadcrumbs function will improve user experience when user navigates your website. Specifically it will show your user the hierarchy of pages from the home page so they will be guided by a dynamic link from a particular page link to homepage link.

There are plugins available for this function but you don’t really need to install it if you’re will to do an experiment for a powerful trick and erratic plugins will cause your website to load slow on browsers so I think its practical to technically know what you are doing or do a backup first.

So let’s get started.

First you need to edit your function.php under your current theme you are using add these following lines.

Insert in your function.php File

if (!function_exists('innovedesignswp_breadcrumb_lists')) :

function innovedesignswp_breadcrumb_lists() {

	/* === OPTIONS === */
	$text['home']     = 'Home'; // string for the 'Home' link
	$text['category'] = 'Published in '%s''; // string for a category page
	$text['search']   = 'Query results "%s"'; // string for a search results page
	$text['tag']      = 'Tagged in "%s"'; // string for a tag page
	$text['author']   = 'Published by %s'; // string for an author page
	$text['404']      = 'Page Not Found'; // string for the 404 page

	$show_current   = 1; // 1 - show current post, page, or category title in breadcrumbs, 0 - if you don't want to show
	$show_on_home   = 0; // 1 - show breadcrumbs on the homepage, 0 - if you don't want to show
	$show_home_link = 1; // 1 - show the 'Home' link, 0 - if you don't want to show
	$show_title     = 1; // 1 - show the title for the links, 0 - if you don't want to show
	$delimiter      = ''; // delimiter between crumbs
	$before         = '
	<li class="current"><span>'; // html element before current link
	$after          = '</span></li>
'; // closing span element
	/* === END OF OPTIONS === */

	global $post;
	$home_link    = home_url('/');
	$link_before  = '
	<li itemtype="http://data-vocabulary.org/Breadcrumb" itemscope>';
	$link_after   = '</li>
';
	$link_attr    = ' itemprop="url"';
	$itemproptitle_before = '<span itemprop="title">';
	$itemproptitle_after = '</span>';
	$link         = $link_before . '<a' . $link_attr . ' href="%1$s">' . $itemproptitle_before . '%2$s' . $itemproptitle_after . '</a>' . $link_after;
	$parent_id    = $parent_id_2 = $post->post_parent;
	$frontpage_id = get_option('page_on_front');

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

		if ($show_on_home == 1) echo '
<div class="breadcrumbs">
<ul>' .$link_before. '<a href="' . $home_link . '">' . $itemproptitle_before . $text['home'] . $itemproptitle_after . '</a>' .$link_after. '</div>
';

	} else {

		echo '
<div class="breadcrumb">
<ul class="ul-crumb">';
		if ($show_home_link == 1) {
			echo '' . $link_before . '<a href="' . $home_link . '" ' . $link_attr . '>' . $itemproptitle_before . $text['home'] . $itemproptitle_after . '</a>' . $link_after;
			if ($frontpage_id == 0 || $parent_id != $frontpage_id) echo $delimiter;
		}

		if ( is_category() ) {
			$this_cat = get_category(get_query_var('cat'), false);
			if ($this_cat->parent != 0) {
				$cats = get_category_parents($this_cat->parent, TRUE, $delimiter);
				if ($show_current == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
				$cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
				$cats = str_replace('">', '"> ' . $itemproptitle_before, $cats);
				$cats = str_replace('</a>', $itemproptitle_after . '</a>' . $link_after, $cats);
				if ($show_title == 0) $cats = preg_replace('/ title="(.*?)"/', '', $cats);
				echo $cats;
			}
			if ($show_current == 1) 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, $home_link . '/' . $slug['slug'] . '/', $post_type->labels->singular_name);
				if ($show_current == 1) echo $delimiter . $before . get_the_title() . $after;
			} else {
				$cat = get_the_category(); 
				$cat = $cat[0];
				$cats = get_category_parents($cat, TRUE, $delimiter);
				if ($show_current == 0) 
				$cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
				$cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
				$cats = str_replace('">', '"> ' . $itemproptitle_before, $cats);
				$cats = str_replace('</a>', $itemproptitle_after . '</a>' . $link_after, $cats);
				if ($show_title == 0) $cats = preg_replace('/ title="(.*?)"/', '', $cats);
				echo $cats;
				if ($show_current == 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($parent_id);
			$cat = get_the_category($parent->ID); 
			$cat = $cat[0];
			$cats = get_category_parents($cat, TRUE, $delimiter);
			$cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
			$cats = str_replace('">', '"> ' . $itemproptitle_before, $cats);
			$cats = str_replace('</a>', $itemproptitle_after . '</a>' . $link_after, $cats);
			if ($show_title == 0) 
			$cats = preg_replace('/ title="(.*?)"/', '', $cats);
			echo $cats;
			printf($link, get_permalink($parent), $parent->post_title);
			if ($show_current == 1) echo $delimiter . $before . get_the_title() . $after;

		} elseif ( is_page() && !$parent_id ) {
			if ($show_current == 1) echo $before . get_the_title() . $after;

		} elseif ( is_page() && $parent_id ) {
			if ($parent_id != $frontpage_id) {
				$breadcrumbs = array();
				while ($parent_id) {
					$page = get_page($parent_id);
					if ($parent_id != $frontpage_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 ($show_current == 1) {
				if ($show_home_link == 1 || ($parent_id_2 != 0 && $parent_id_2 != $frontpage_id)) echo $delimiter;
				echo $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 ' (';
			  printf( __('Pages', '' ) . ' ' . get_query_var('paged') );
			if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
		}

		echo '</ul>
</div>
<!-- .breadcrumbs -->';

	}
} 
endif;

In your Php controller most likely in your header.php file that controls your page, post, archives, etc after your tag. Insert this following code.

Insert in your header.php

<?php innovedesignswp_breadcrumb_lists(); ?>

Good job! You have a pretty made breadcrumbs for your WordPress Theme you can also adjust it in your CSS by copying this code:

Insert in your style.css

.breadcrumb {
	display: block;
}
.breadcrumb ul.ul-crumb li:last-child:after {
    content: "";
}
.breadcrumb ul.ul-crumb li:after {
    content: "»";
    padding-left: 10px;
}
.breadcrumb ul.ul-crumb li {
    display: inline;
    padding-right: 10px;
}

 

Breadcrumb Features

This breadcrumb for WordPress appears to the following pages:

  • HTML5 Markup Validator Passed :D
  • Post
  • Page
  • Tags
  • Category
  • Daily Archive
  • Monthly Archive
  • Yearly Archive
  • Author
  • Attachment
  • Search Results
  • 404 Error Page
  • Breadcrumbs in Google Rich Snippet (like what you can see below)

breadcrums rich snippet

 
Some of you are looking for your solution on prompting “Error found while checking this document as HTML5!”, HTML content marked up with RDFa is actually not recognized as HTML5 !Doctype, your option is to convert it to Microdata instead. You may encounter these results below:

 Line 78, Column 80: Attribute xmlns:v not allowed here.
…s:v="http://rdf.data-vocabulary.org/#"&gt;&lt;span typeof="v:Brea…

 Line 78, Column 80: Attribute with the local name xmlns:v is not serializable as XML 1.0.
…s:v="http://rdf.data-vocabulary.org/#"&gt;&lt;span typeof="v:Brea…

To some it up.. if you need to have a clean breadcrumb function for WordPress, why not to try or install this code in your theme.. If you are having a difficulty installing it, I may provide you a plugin for you to install it smoothly. Or leave me a message if you have any questions.
Thanks!

-Source: Dimox.net

Install Rich Snippets Breadcrumbs into WordPress3.90/5 (78.00%) 10 votes
About

Elvin is one of the contributors of InnoveDesigns.com. He has been creating Wordpress Plugins, Magento Extensions, & Mobile Applications. If you find this article useful, please Follow him on .

Published under HTML5, Rich Snippet, Web Development Guide, Wordpress