Modify Breadcrumbs in Canvas from WooThemes

WooThemes CanvasRecently, at the marketing company I do a lot of custom development for, they signed up for the Theme Club over at WooThemes and I was faced with creating my first child theme based on the Canvas theme. I have always hand-built my themes and my experience with premium themes is minimal, but man WooThemes has some rock star developers on the team there. Anyways, one thing I had to do was modifying the output of the breadcrumbs that is found within the theme. Off to Google we go for a fast answer, right? Low and behold I found nothing? Surely I’m not the only one that has required this customization? All I wanted to do was remove the default “You are here” text and change the separator which was displaying as >.

Today, I’ll show you how to change the output of the breadcrumbs in your Canvas theme without modifying the original source code. I’m assuming you are running a child theme already, which you should be doing, but if you are unsure of what that is I would suggest watching this video from WooThemes on how this works.

Open or create a functions.php

If your child theme doesn’t have a functions.php, go ahead and create one. In you functions.php create a new function called “my_custom_woo_breadcrumbs()“.

<?php
    function my_custom_woo_breadcrumbs() {

    }
?>

Filter the defaults

Now thankfully, WooThemes is so awesome, they provided a way for us to filter the default options in the breadcrumbs without touching or duplicating any of their code. The filter is, “woo_breadcrumbs_args“. We’ll use the add_filter() function with this filter so we can hook in our customizations. Add the line of code below to the end of our function, after the closing curly brace. NOTE: you can also add this before you define the function, but my personal taste is too linear for this method :P

<?php
    function my_custom_woo_breadcrumbs() {

    }
    add_filter('woo_breadcrumbs_args', 'my_custom_woo_breadcrumbs');
?>

Pass our custom defaults

Now that we have that, we are ready to intercept the defaults passed in the “woo_breadcrumbs_args“. This filter passes an array to our custom function called $args, so we’ll want to make sure we pass that through our function and then modify the fields we need. This will allow us to customize only what we need, while the filter retains the other defaults.

<!--?php
    function my_custom_woo_breadcrumbs($args) {
        $defaults = array(
            'separator' =--> '&amp;raquo;',
            'before' =&gt; ''
        );

        return $defaults;
    }
?&gt;

Let’s go through what the above is doing. Inside of $args there is an array called $defaults, I create a new array with the same name and set the parameters that modify the separator and the text that is displayed before the breadcrumbs.

By default, the separator is the greater than symbol, >, but I want it to use the » symbol instead. We will need to change the value of the “separator” key with the required HTML code to display that character.

The next field, “before“, normally outputs “You are here” and I didn’t like that. To me, everyone kind of knows these are breadcrumbs and they show where you are within the website. Verbally saying, “You are here”, is over-kill in my opinion. In our $defaults array we need to overwrite that text with an empty value passed to the “before” key. If you want something else to display here, you can if you feel so.

Lastly, we return the new array and pass it back through the filter and now our breadcrumbs are displaying as desired! I’ll leave you with the set of options that are available in the $defaults array that you can overwrite if you wish. Below is the default settings for the breadcrumbs arguments.

$defaults = array(
	'separator' =&gt; '&gt;',
	'before' =&gt; '<span class="breadcrumb-title">' . __( 'You are here:', 'woothemes' ) . '</span>',
	'after' =&gt; false,
	'front_page' =&gt; true,
	'show_home' =&gt; __( 'Home', 'woothemes' ),
	'echo' =&gt; true, 
	'show_posts_page' =&gt; true
);