WordPress Tricks: Pretty Breadcrumbs for Theme Hybrid based Child Themes

I was bored with the default breadcrumbs that come with Theme Hybrid. Wanted something new. I looked up some tutorials for nice looking breadcrumbs. Found this one which I liked quite a lot and decided to implement it for Humbug. Usually, things are very simple with Theme Hybrid, but this one was slightly ugly. Here’s the code that I used:

PHP Code

function custom_breadcrumb_args( $args = '') {
    $args['separator'] = '';
    $args['before'] = '';
    return $args;
}
add_filter( 'breadcrumb_trail_args', 'custom_breadcrumb_args' );


function add_css_to_breadcrumb_trail_end ($breadcrumb) {
  $string = $breadcrumb;
  $patterns = array();
  $patterns[0] = '/^<div.*<\/a>/';
  $patterns[1] = '/<\/div>/';
  $replacements = array();
  $replacements[1] = '';
  $replacements[0] = '';
  $target = trim(preg_replace($patterns, $replacements, $string));
  $replacement = '<span class="trail-end">'.$target.'</span>';
  $str = str_replace($target, $replacement, $breadcrumb);
  return $str;
}

add_filter( 'breadcrumb_trail', 'add_css_to_breadcrumb_trail_end', 12);

CSS Code

     .breadcrumb {
      overflow: hidden;
      border-bottom: 1px #ddd solid;
      border-left: 1px #ddd solid;
      border-right: 1px #ddd solid;
      background: #f7f7f7;
      height:30px;
      background: #fff;
      width: 999px;
    }
       .breadcrumb-trail {
        margin: 0;
        padding: 0;
        font-style: italic;
        font-size: 12px
      }
       .breadcrumb-title {
      }
       .breadcrumb a,  .breadcrumb span.trail-end {
        display:block;
        padding: 0 15px 0 10px;
        background:url(images/crumbs.gif) no-repeat right center;
        float: left;
        line-height: 30px;
        color: #2361a1;
      } 
      .breadcrumb span.trail-end {
        color: #777;
      }

The background image for the breadcrumb tags can be downloaded from here:

Add the PHP code to your child theme’s functions.php while the CSS code goes into style.css. Goes without saying that you will have to adapt the CSS to your website’s structure (width etc).

1 comment

  1. Hey – thank you for sharing this very cool trick. Have just started with Hybrid and am thinking this will be a lovely addition to the bag of tricks I’m gathering for this framework!

    Thanks again 🙂

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.