Epic Breadcrumbs with Rich Snippets Microdata

So, as it turns out, the cool happening kids on the web are all about this new rich snippets craze. They should. This is what Google recommends, and it is one step closer to the semantic web. So, I thought I would put out my version of what a great set of crumbs should look like.

Here is the heart of it, which foes in your functions.php file:

function the_breadcrumb() {
	global $post;
	echo '<ul id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';
	if (!is_front_page()) {
		echo '<li><a itemprop="url" href="' . get_option('home') . '"><span itemprop="title">Home</span></a></li><li class="separator"> > </li>';
		if (is_category() || is_single() || is_home()) {
			if( get_option( 'show_on_front' ) == 'page' ) echo '<li itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="' . get_permalink( get_option( 'page_for_posts' ) ) . '"><span itemprop="title">Blog</span></a></li>';
			}
			if (is_category() || is_single()) {
				$cat = get_the_category();
				echo '<li class="separator"> > </li><li itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="'.get_category_link( $cat[0]->term_id ).'" title="'.$cat[0]->name.'"><span itemprop="title">'.$cat[0]->name.'</span></a></li>';

				if (is_single()) {
				echo '</li><li class="separator"> > </li><li itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="'.get_permalink().'"><span itemprop="title">'.get_the_title().'</span></a></li>';
				}
			} elseif (is_page()) {
				if($post->post_parent){
				$anc = get_post_ancestors( $post->ID );
				$title = get_the_title();
				foreach ( $anc as $ancestor ) {
					$output = '<li itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="'.get_permalink($ancestor).'" title="'.get_the_title($ancestor).'"><span itemprop="title">'.get_the_title($ancestor).'</span></a></li> <li class="separator"> > </li>';
				}
				echo $output.'<strong title="'.$title.'"> <a itemprop="url" href="'.get_permalink().'"><span itemprop="title">'.$title.'</span></a></strong>';
			} else {
				echo '<li itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><strong> <a itemprop="url" href="'.get_permalink().'"><span itemprop="title">'.get_the_title().'</span></a></strong></li>';
			}
		}
	}
	elseif (is_tag()) {single_tag_title();}
	elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';}
	elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}
	elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}
	elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}
	elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}
	elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}
	echo '</ul>';
}

This is the code where you call your breadcrumbs. Insert it anywhere you want the breadcrumbs to show up on your theme.

<?php the_breadcrumb(); ?>

Last, but not least, here is a bit of CSS to make it look awesome!


/**** Bread Crumbs ****/
#breadcrumbs {
	list-style:none;
	overflow:hidden;
	margin:0 0 1em;
}
#breadcrumbs li {
	display:inline-block;
	margin: 0;
}
#breadcrumbs .separator {
	color:#999;
	margin: 0 0.3em;
}

This is the code where you call your breadcrumbs. Insert it anywhere you want the breadcrumbs to show up on your theme.

Leave a comment

Your email address will not be published. Required fields are marked *