Breadcrumbs Modification

[manavecplan]

I'm using the following code for my breadcrumbs( copied in parts from http://wpcanada.ca/tutorials/tutorial-full-width-breadcrumbs/):

//* Modify breadcrumb arguments.
add_filter( 'genesis_breadcrumb_args', 'malcolm_breadcrumb_args' );
function malcolm_breadcrumb_args( $args ) {
	$args['home'] = 'Home';
	$args['sep'] = ' » ';
	$args['list_sep'] = ', '; // Genesis 1.5 and later
    $args['prefix'] = '<div class="breadcrumbwrapper"><div class="breadcrumb">';
	$args['suffix'] = '</div></div>';
	$args['heirarchial_attachments'] = true; // Genesis 1.5 and later
	$args['heirarchial_categories'] = true; // Genesis 1.5 and later
	$args['display'] = true;
	$args['labels']['prefix'] = '';
	$args['labels']['author'] = 'Archives for ';
	$args['labels']['category'] = 'Archives for '; // Genesis 1.6 and later
	$args['labels']['tag'] = 'Archives for ';
	$args['labels']['date'] = 'Archives for ';
	$args['labels']['search'] = 'Search for ';
	$args['labels']['tax'] = 'Archives for ';
	$args['labels']['post_type'] = 'Archives for ';
	$args['labels']['404'] = 'Not found: '; // Genesis 1.5 and later
    return $args;
}

How do I use actual images for the arguments 'home' and 'sep' ?

[Paul Sandford]

Try this and report back 🙂

$args['home'] = ' <img src"/images/some-image-of-a-home.png"> '; 
$args['sep'] = ' <img src"/images/some-other-image.png"> ';

Paul.

---

Paul Sandford.  Follow @pm_sandford on Twitter

[manavecplan]

Thanks for replying so quickly Paul!

This is very similar to what I had tried(copy-pasted from a site) but it doesn't work.

In fact, it gives me a parse error(just tried again). 🙁

[Paul Sandford]

Ok - post the code you tried (assuming you've tried my suggestion as opposed to the similar code copied from another site), a link to the site and the exact error.

---

Paul Sandford.  Follow @pm_sandford on Twitter

[manavecplan]

It's a local sandbox for now...hence, no link available.

And, now, unfortunately, the breadcrumbs aren't even showing up! 🙁

Note: I have no other PHP except the default Sample theme PHP and this code.

[Paul Sandford]

Hmmm... it should be working but a parser error is making me wonder if the quotes are getting picked up by PHP. Not sure how familiar you are with PHP but you either need to double the quotes inside the string or back slash them. My fault to assuming, so if you're just copying my code it should really be:

$args['home'] = ' <img src\"/images/some-image-of-a-home.png\"> '; 
$args['sep'] = ' <img src\"/images/some-other-image.png\"> ';

Hope that makes sense. Let us know how you get on with that.

---

Paul Sandford.  Follow @pm_sandford on Twitter

[manavecplan]

Hey Paul,

Almost there! 😀

The original code you gave me works just fine in theory:

        $args['home'] = ' <img src"/images/some-image-of-a-home.png"> '; 
	$args['sep'] = ' <img src"/images/some-other-image.png"> ';

However, only the separators kick in when I use the following code:

        $args['home'] = ' <img src="http://i.imgur.com/S8XY6Nx.png">'; 
	$args['sep'] = ' <img src="http://i.imgur.com/YgivoWd.png">';

It makes no sense to me because the formats are identical...

Also, the following works just fine:

$args['home'] = ' Home '; 
	$args['sep'] = ' <img src="http://i.imgur.com/YgivoWd.png">';

[Len]

Hi manavvecplan,

I posted the answer to your question on my site. To repeat it here for the benefit others,

$args['sep'] = '<img src="'. get_bloginfo( 'stylesheet_directory' ) . '/images/sep.png">';

This will call the image named sep.png in your child theme's image folder and use it to output the separator rather than a character.

With respect to the home filter I may be wrong but I believe Genesis strips out all HTML from that filter.

[manavecplan]

Hey Len,

Thanks for chiming in...

Guess I'm gonna leave it at changing the separators though I will say that it's mighty strange that the home argument accepts dashicons/icon fonts but not an image!

Thanks again Len, Paul!

[Len]

Hi manavvecplan,

I put some feelers out on Twitter regarding the 'home' filter. Here is a method that integrates Font Awesome with the 'home' filter.

http://www.alphablossom.com/replace-genesis-breadcrumbs-home-text-house-icon-image-using-genesis-filter-font-awesome-example-included/

Of course you don't have to use Font Awesome if you don't want to - you can use any icon font such as Dashicons (which is already included with WordPress) or even Genericons.

I thought Genesis filters out HTML from the 'home' filter but it doesn't - but it does use esc_html() on link text according to @GaryJ

Hope that helps.

[Author]

Posts