Breadcrumbs are a great way to add another form of navigation for users to easily find their way around sites as they dig deeper through articles and pages. In terms of usability, breadcrumbs can reduce the number of actions for users to return back to a higher level page that they were on a few moments before; and they are especially great to visually show someone’s location on sites if they just happened to land on a certain page through search, or a link.
Breadcrumbs can be enabled in the Genesis theme settings in the dashboard, where you will find four check boxes to have them either enabled or disabled on certain sections of sites. Once the breadcrumbs are activated, you should notice them above the content area. For example, if you are on your home page above the content area you should see: “You are here: Home” and if you want to change the text “You are here” or even the link to home, it is possible with a filter.
Below is an example on how to use the Genesis breadcrumb filter. The following snippet will change the default “you are here” text with an “x,” as well as use “>” for separators in place of the “/” and an image for the home link.
add_filter('genesis_breadcrumb_args', 'custom_breadcrumb_args');
function custom_breadcrumb_args($args) {
$args['labels']['prefix'] = 'x'; //marks the spot
$args['sep'] = '>';
$args['home'] = '<img src="'. get_bloginfo( 'stylesheet_directory' ) . '/images/homegraphic.png" alt="home">';
return $args;
}
To use the code above simply add it to your child theme’s function.php file and make any modifications you’d like.
List of all filterable items and their default values in the genesis breadcrumb trail are below.
['home'] = __('Home', 'genesis'),
['sep'] = '/',
['prefix'] = '<div class="breadcrumb">',
['suffix'] = '</div>',
['display'] = true
['labels']['prefix'] = __('You are here: ', 'genesis'),
['labels']['author'] = __('Archives for ','genesis'),
['labels']['tag'] = __('Archives for ','genesis'),
['labels']['date'] = __('Archives for ','genesis'),
['labels']['search'] = __('Search for ','genesis'),
['labels']['tax'] = __('Archives for ','genesis')
Very helpful!
this is great – but you dont say which file or where to put any of this code – please explain, thanks
Ah thanks for noting I didn’t say about where to put the code. I’ll be updating the post and any others to better explain.
You will want to put this code in your child theme’s
functions.phpafter this line of code:But before
?>at the end of the document (if exists)Hi Christopher,
This is very helpful, but when I use the code you provide above, the breadcrumbs output the html source code instead of the image in the [home] argument. Have you tested this with a Genesis child theme? Will the home argument really output the image instead of the html for the image? It just doesn’t seem to be parsing the html for the img src.
Thanks,
Angela
Angela,
In a recent update of Genesis the output of the home strips any HTML :(. Going to see if I can find a way around this, but for now the best way may be to target it with css and use a background image and hide the text.
I got some code for the functions.php to append the a href for the home link, so what I did was added a class to the a href called “home.” Then, I gave that a class a background image and left the home link as a non-breaking space character. It’s working so far. I realized that the issue with the Genesis home variable in the breadcrumbs is that it does a bit too much with it. It uses it as both the text link but also as the “title” for the a href, hence why the html needs to be stripped out. So, yes, it would be better if Genesis simplified this a bit to allow for greater flexibility.
Thanks, its useful. I didnt knew about breadcrumb . I now use it my site.