Yoast Breadcrumbs for WooThemes Canvas

As much as I love Canvas by WooThemes, it leaves a little to be desired in the area of breadcrumbs.

WordPress SEO by Yoast, however, does a great job of handling breadcrumbs but doesn’t play nicely with Canvas out of the box.

If you are here and wondering why you should use breadcrumbs, go read Yoast’s Definitive Guide to WordPress SEO.

If you’re ready to get your breadcrumbs worked out, READ ON!

The problem

WooThemes breadcrumbs don’t put the category in the breadcrumb trail.

So, if someone is reading a post the breadcrumb will look something like “You are here: Home > the name of the post” which doesn’t serve the visitor or search engines very well.

For the visitor, the breadcrumb trail is basically useless because they can’t easily click back to the parent category and for search engines the hierarchy is broken as well.

I wanted the breadcrumbs to have the category. For added complexity, I am using the Canvas magazine page template for my blog homepage, so I needed the breadcrumbs to have a link to the blog home as well. You can see the end result up top in my breadcrumbs or so you don’t have to scroll up, here it is:

Home > Learn > WordPress Tips > Yoast Breadcrumbs for WooThemes Canvas

In this trail, Learn is actually a page and WordPress Tips is a Category.

Steps to replace WooThemes breadcrumbs with WordPress SEO breadcrumbs by Yoast

1. Disable the display of breadcrumbs in Canvas: Canvas > Theme Options > General Settings > Display Options
2. Activate breadcrumbs in Yoast WordPress SEO: SEO > Internal Links
3. Place the following code in your Canvas child themes functions.php file

// Replace WooThemes Breadcrumbs with Yoast breadcrumbs
add_action( 'init', 'tm_breadcrumbs' );
function tm_breadcrumbs() {
    remove_action( 'woo_loop_before', 'woo_breadcrumbs', 10 );
    add_action( 'woo_loop_before','tm_yoast_breadcrumb', 20, 0);
    function tm_yoast_breadcrumb() {
        if ( function_exists('yoast_breadcrumb')  && !is_front_page() ) {
            yoast_breadcrumb('<p class="breadcrumbs">','</p>');
        }
    }

}

Add blog page using the Canvas magazine template to the breadcrumb trail

In order to accomplish this, we will do a simple string replacement. In the code below, which is exactly what I used here, the $from line represents the first link in the breadcrumb trail “Home”. So, you would want to change the URL to your URL.

The $to line represents what the beginning of the breadcrumb trail will become. So, you would want to put in the URL for your homepage and the page you’re using the magazine (or other page template) on. Also, change “Learn” to the name of your page.

// Add Learn Page to Breadcrumbs
add_filter( 'wpseo_breadcrumb_output', 'tm_wpseo_breadcrumb_output' );

function tm_wpseo_breadcrumb_output( $output ){
if( is_single() || is_archive() ){
$from = '<span typeof="v:Breadcrumb"><a href="https://tummel.me" rel="v:url" property="v:title">Home</a></span>'; 
$to = '<span typeof="v:Breadcrumb"><a href="https://tummel.me" rel="v:url" property="v:title">Home</a></span> > <span typeof="v:Breadcrumb"><a href="https://tummel.me/learn/" rel="v:url" property="v:title">Learn</a></span>';
$output = str_replace( $from, $to, $output );
}
return $output;
}

 
Congratulations, you have now migrated from WooThemes breadcrumbs to Yoast WordPress SEO: Internal Links (aka Yoast breadcrumbs)!