Yoast Breadcrumbs and Custom Post Type Landing Pages in WordPress

26 May 2016 | Coding Corner

Share this article

Have you ever tried using a custom landing page for a WordPress custom post type and been frustrated trying to get the breadcrumb trail to work properly with the Yoast plugin?

By default, the breadcrumb element will link to the automatically generated archive page for that post type, but in this scenario we have our own page created using the page editor and don’t want to use the archive page. It cost me half a day of my life that I will never be able to get back in order to find a solution to that one. On the assumption that I’m not the only one who will ever face this problem, here is how I solved it.

Use a child theme

You need to add some code to functions.php, so make sure you are using a child theme or your own bespoke theme. Otherwise, if you make the changes in the default functions.php, your code will get nuked when you update the theme.

Make sure you have the Yoast plugin running

I can’t believe anyone has a WordPress site nowadays without installing the Yoast WordPress SEO plugin. But just in case …

Make sure it’s activated and that you have configured it to generate breadcrumbs. Depending on the theme you have installed, you may need to do some jiggery-pokery to get the breadcrumbs inserted into your page templates. There is some guidance on the official Yoast pages here: Implement Yoast SEO breadcrumbs.

If you are struggling to edit templates, you might have more success with the Surbma – Yoast Breadcrumb Shortcode plugin. This creates a shortcode that you can add to individual pages and posts. But having to add the shortcode to every page and post is a bit clunky and restricts your layout options.

Functions.php

Under ‘appearance –> ‘editor’, you should be able to select the functions.php file for your (child)theme. If you don’t have permissions to edit the file through the interface, then FTP may be your friend.

In here, we will need to add some code that will modify the behaviour of the breadcrumb code from the Yoast WordPress SEO plugin.

The code here is based on a useful routine by Joseph McClellan I found here:  https://gist.github.com/jmcclellan/b2d97ffee0e924e28fa1.  I was already using this (the code in grey below) to set the breadcrumb landing page element for normal posts to ‘Blog’.

The extra code (in red below) adds the following functionality: Where the post has the custom post type ‘project’, set the landing page element in the breadcrumb trail to the page with ID 105789, and label the element ‘Portfolio’. You can easily adapt the routines for other scenarios.

/**
 * Conditionally Override Yoast SEO Breadcrumb Trail
 * https://plugins.svn.wordpress.org/wordpress-seo/trunk/frontend/class-breadcrumbs.php
 * -----------------------------------------------------------------------------------
 * Further amended by Kent House to set custom landing page for 'project' custom post type
 * and landing page for normal posts to a manually created 'blog' page 
*/

add_filter( 'wpseo_breadcrumb_links', 'wpse_100012_override_yoast_breadcrumb_trail' );

function wpse_100012_override_yoast_breadcrumb_trail( $links ) {
 global $post;

 if ($post->post_type == 'project') {
 $breadcrumb[] = array(
 'url' => get_permalink( 105789 ),
 'text' => 'Portfolio',
 );
 array_splice( $links, 1, -2, $breadcrumb );
 }
 elseif ( is_home() || is_singular( 'post' ) || is_archive() ) {
 $breadcrumb[] = array(
 'url' => get_permalink( 109987 ),
 'text' => 'Blog',
 );

 array_splice( $links, 1, -2, $breadcrumb );
 }
 return $links;
}


I hope this helps you in the right direction.

 

How Can We Help? Get in touch.

  • This field is for validation purposes and should be left unchanged.

And stay in touch!