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).
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 🙂