Custom Breadcrumbs Function

Recently had occasion to build a custom WordPress ┬ábreadcrumb function for a theme we’re developing. Here’s the result of what we have. Credit to Stuart of Cazue for the code we based this on.

The Custom Breadcrumbs Function:

function the_breadcrumb() { ?>
   <?php if (!is_front_page()) { ?>
  <ul class="breadcrumbs">
       <?php if (!is_front_page()) { ?>
     <li><a href="<?php echo get_option('home'); ?>">Home</a></li>
       <?php }
       if (is_home()) { ?>
     <li>Blog</li>
       <?php }
       if (is_category() || is_single()) { ?>
     <li><?php echo the_category(' </li><li> '); ?></li>
       <?php }
       if (is_single()) { ?>
     <li><?php echo the_title(); ?></li>
       <?php } elseif (is_page() && !is_front_page()) {
       global $post;
       if(get_post_ancestors( $post->ID )) {
       $anc = array_reverse(get_post_ancestors( $post->ID ));
       foreach ( $anc as $ancestor ) { ?>
     <li><a href="<?php echo get_permalink($ancestor); ?>" title="<?php echo get_the_title($ancestor);?>"><?php echo get_the_title($ancestor); ?></a></li>
       <?php } ?>
     <li><?php echo the_title(); ?></li>
       <?php } else { ?>
     <li><?php echo the_title(); ?></li>
       <?php }
       } elseif (is_tag()) {
     single_tag_title();
       } elseif (is_day()) { ?>
     <li>Archive for <?php echo the_time('F jS, Y'); ?></li>
       <?php } elseif (is_month()) { ?>
     <li>Archive for <?php echo the_time('F, Y'); ?></li>
       <?php } elseif (is_year()) { ?>
     <li>Archive for <?php echo the_time('Y'); ?></li>
       <?php } elseif (is_author()) { ?>
     <li>Author Archive</li>
       <?php } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
     <li>Blog Archives</li>
       <?php } elseif (is_search()) { ?>
     <li>Search Results</li>
       <?php } ?>
  </ul>
<?php } }

And here is the CSS for the Custom breadcrumbs function. This came from the Foundation 5 CSS, so edit as needed to make it work on your site.


.breadcrumbs {
 display: block;
 padding: 0.5625rem 0.875rem 0.5625rem;
 overflow: hidden;
 margin-left: 0;
 list-style: none;
 border-style: solid;
 border-width: 1px;
 background-color: #f4f4f4;
 border-color: #dadada;
 -webkit-border-radius: 3px;
 border-radius: 3px; }
 .breadcrumbs > * {
 margin: 0;
 float: left;
 font-size: 0.6875rem;
 text-transform: uppercase; }
 .breadcrumbs > *:hover a, .breadcrumbs > *:focus a {
 text-decoration: underline; }
 .breadcrumbs > * a,
 .breadcrumbs > * span {
 text-transform: uppercase;
 color: #008cba; }
 .breadcrumbs > *.current {
 cursor: default;
 color: #333333; }
 .breadcrumbs > *.current a {
 cursor: default;
 color: #333333; }
 .breadcrumbs > *.current:hover, .breadcrumbs > *.current:hover a, .breadcrumbs > *.current:focus, .breadcrumbs > *.current:focus a {
 text-decoration: none; }
 .breadcrumbs > *.unavailable {
 color: #999999; }
 .breadcrumbs > *.unavailable a {
 color: #999999; }
 .breadcrumbs > *.unavailable:hover, .breadcrumbs > *.unavailable:hover a, .breadcrumbs > *.unavailable:focus,
 .breadcrumbs > *.unavailable a:focus {
 text-decoration: none;
 color: #999999;
 cursor: default; }
 .breadcrumbs > *:before {
 content: "/";
 color: #aaaaaa;
 margin: 0 0.75rem;
 position: relative;
 top: 1px; }
 .breadcrumbs > *:first-child:before {
 content: " ";
 margin: 0; }

The following two tabs change content below.

Teejay Zheng

Contributor, Web Developer at Paglalakbay Philippines

Latest posts by Teejay Zheng (see all)

0 comments