Breadcrumbs are a navigational technique displaying all visited pages leading from the home page to the currently viewed page. All pages are linked for easy backwards navigation. Typically this is placed near the top of a web page. So for example, if you look to the top of this page you will see the breadcrumb navigation menu that leads a path back to the homepage.
There are loads of WordPress plugins out there that can handle breadcrumbs for you, but they are not always the best option as they can often get things wrong and end up being more hassle than they are worth. The following code will have breadcrumbs working on your site in no time.
Simply paste the code below into your theme’s functions.php file:
<?php
function the_breadcrumb() {
global $post;
echo '<ul id="breadcrumbs">';
if (!is_home()) {
echo '<li><a href="';
echo get_option('home');
echo '">';
echo 'Home';
echo '</a></li><li class="separator"> / </li>';
if (is_category() || is_single()) {
echo '<li>';
the_category(' </li><li class="separator"> / </li><li> ');
if (is_single()) {
echo '</li><li class="separator"> / </li><li>';
the_title();
echo '</li>';
}
} elseif (is_page()) {
if($post->post_parent){
$anc = get_post_ancestors( $post->ID );
$title = get_the_title();
foreach ( $anc as $ancestor ) {
$output = '<li><a href="'.get_permalink($ancestor).'" title="'.get_the_title($ancestor).'">'.get_the_title($ancestor).'</a></li> <li class="separator">/</li>';
}
echo $output;
echo '<strong title="'.$title.'"> '.$title.'</strong>';
} else {
echo '<li><strong> '.get_the_title().'</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>';
}
?>
Then to call the breadcrumbs onto your page (usually in the header file), simply use the following code:
<?php the_breadcrumb(); ?>
Below is some simple CSS to get you going. Thanks for the suggestion!
#breadcrumbs{
list-style:none;
margin:10px 0;
overflow:hidden;
}
#breadcrumbs li{
float:left;
margin-right:15px;
}
#breadcrumbs .separator{
font-weight:700;
font-size:20px;
color:#999;
}