A better breadcrumb trail with Yoast

What is a breadcrumb & why should I use it?

A breadcrumb trail is a website navigation tool that allows a user to see where the current page is in relation to the Web site’s hierarchy.

You’ll see an example above the title of this post (*hint*) look for You are here. 

Providing navigational aids to site users, helps them move through your site, increasing their engagement with your content and may improve your Google ranking.

How do I customize the breadcrumb label?

Breadcrumb trails are built using page titles, category names and post titles. If you have a long page title you may wish to edit the breadcrumb trail to keep it nice and tidy. In this post we’ll help you replace the Responsive theme’s breadcrumb trail with the breadcrumb trail from the WordPress SEO by Yoast plugin.

The Yoast plugin allows you to customize the trail label for each page, category or post.  Have a look at our Event Registration page. Notice that the Page title is “Toronto WordPress Workshops Registration” but the breadcrumb trail is simply “Workshops”.

The code provided will also remove the breadcrumb trail on the home page.

This post assumes you have already installed and activated the WordPress SEO by Yoast plugin.

Before you make any code edits backup! Use at your own risk.

Step 1: Modify loop-header.php

If you already have a loop-header.php file in your child theme, open it.  If not open the loop-header.php file from the Responsive parent theme and save it to your child theme folder.  Find the following code

get_responsive_breadcrumb_lists();

replace it with

 if (is_front_page()) {
 echo '
',''; } else { if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('

‘,”); } }

Save the loop-header.php file to your child theme

Step 2: Modify your stylesheet

Open the child theme style.css file  and paste in the following, you can modify this to suit your theme.

/* =breadcrumbs yoast
-------------------------------------------------------------- */
#breadcrumbs {
font-family:Arial,Verdana,sans-serif;
font-size:10px;
}
#breadcrumbs a:link,
#breadcrumbs a:visited {
 text-decoration: none;
 color:#999999;
}
#breadcrumbs a:active,
#breadcrumbs a:hover {
 text-decoration: underline;
 color:#999999;
}
#breadcrumb-spacer {
}

Save the file and then upload the loop-header.php and style.css files to your child theme folder by FTP.

Step 3: Use Yoast to edit the breadcrumb title

To customize the breadcrumb trail label for a specific page, open the edit page screen in the WordPress admin dashboard.

In the WordPress SEO by Yoast panel click on the cog to access the Advanced tab and  in the Breadcrumbs title field enter your custom title. Update the page and you’ll see this better breadcrumb trail in action. You can also edit the breadcrumb title for categories and posts.

[text-blocks id=”4997″]