The web loves to make things complicated. From plugins to turning what could be a few lines of code into a novel, you’ll find a plethora of examples as to how to create breadcrumbs for your WordPress site.
Here, though, you’ll get nothing but the simplest way to add a breadcrumb to Post pages only.
Firstly, my thoughts on breadcrumbs in general:
- Google likes them.
- They’re ugly.
- Who actually uses them?
Now, these three points contradict one another, because even though Google likes them, the Big G also tells us not to do things just for search engine purposes, and since I’m not convinced in any way that any real users actually use breadcrumbs, and therefore they lead to additional unnecessary clutter on a page, how can we make Google happy but still create the best page possible?
The short answer is JSON, and I’ll cover that below (with a lot more code than the first example).
But if you just want a quick way to show breadcrumbs on your Post pages, add this to your functions.php:
function clicknathan_breadcrumb() {
$category = get_the_category();
$cat_name = $category[0]->cat_name;
$cat_link = get_category_link( $category[0]->term_id );
echo '<p class="breadcrumb">You are here: <a href="'.get_site_url().'">Home</a> / <a href="'.$cat_link.'">'.$cat_name.'</a> / '.get_the_title().'</p>';
}
Then pop this anywhere in your theme’s single.php file you’d like to display it:
<?php clicknathan_breadcrumb(); ?>
Here we
get_the_category()
, which pulls up a list of all of the categories the post is in. Then we just grab the first one, because no one wants a breadcrumb that leads back to multiple trails, then we display it all so that it ends up looking like this:
But wait, there’s more! Buy now and get twice as many knives that can cut through a shoe (or something)!
If you don’t want your site’s display cluttered up with any actual visible breadcrumbs, Google tells us how to do it. Unfortunately, they don’t tell us how to do it with WordPress. So I’ll play G for a moment and help out.
// Schema.org JSON for breadcrumbs
add_action('wp_footer','clicknathan_schema_breadcrumbs');
function clicknathan_schema_breadcrumbs() {
$post_id = get_option('page_for_posts');
$post = get_post($post_id);
$slug = $post->post_name;
$blog_posts_page_slug = '/'.$slug;
$site_name = get_bloginfo('blogname');
if (!is_search()) { ?>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[<?php if (is_singular('post')) { // if on a single blog post ?>
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "<?php echo get_site_url('url').$blog_posts_page_slug; ?>",
"name": "<?php echo $site_name; ?>"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "<?php echo get_permalink(); ?>",
"name": "<?php echo get_the_title(); ?>"
}
}
<?php } elseif (is_singular('product')) { // if on a single product page
global $post;
$terms = wp_get_object_terms($post->ID, 'product_cat');
if(!is_wp_error($terms)) {
$product_category_slug = $terms[0]->slug;
$product_category_name = $terms[0]->name;
}
?>
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "<?php echo get_bloginfo('url'); ?>/products/<?php echo $product_category_slug; ?>/",
"name": "<?php echo $product_category_name; ?>"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "<?php echo get_permalink(); ?>",
"name": "<?php echo get_the_title(); ?>"
}
}
<?php } elseif (is_page() && !is_front_page()) { // if on a regular WP Page
global $post;
if ( is_page() && $post->post_parent ) { // if is a child page
$post_data = get_post($post->post_parent);
$parent_page_slug = $post_data->post_name;
$parent_page_url = get_bloginfo('url').'/'.$parent_page_slug.'/';
$parent_page_title = ucfirst($parent_page_slug);
$position_number = '2';
} else {
$page_url = get_permalink();
$page_title = '';
$position_number = '1';
} ?>
<?php if ( is_page() && $post->post_parent ) { ?>{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "<?php echo $parent_page_url; ?>",
"name": "<?php echo $parent_page_title; ?>"
}
},<?php } ?>
{
"@type": "ListItem",
"position": <?php echo $position_number; ?>,
"item":
{
"@id": "<?php echo get_permalink(); ?>",
"name": "<?php echo get_the_title(); ?>"
}
}
<?php } elseif (is_home()) { // if on the blog page ?>
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "<?php echo get_site_url('url').$blog_posts_page_slug; ?>",
"name": "<?php echo $site_name; ?>"
}
}
<?php } elseif (is_category() || is_tag()) { ?>
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "<?php echo get_site_url('url').$blog_posts_page_slug; ?>",
"name": "<?php echo $site_name; ?>"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "<?php echo 'https://'.$_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; ?>",
"name": "<?php if (is_category()) { echo single_cat_title('', false); } else { echo single_tag_title('', false); } ?>"
}
}
<?php } elseif (is_tax('product_cat') || is_tax('product_tag')) { // product category and taxonomy pages
global $post; $termname = get_query_var( 'term' ); $termname = ucfirst($termname); ?>
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "<?php echo get_bloginfo('url'); ?>",
"name": "Store"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "<?php echo 'https://'.$_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; ?>",
"name": "<?php echo $termname; ?>"
}
}
<?php } elseif (is_archive()) { // date based archives and a catch all for the rest ?>
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "<?php echo get_site_url('url').$blog_posts_page_slug; ?>",
"name": "<?php echo $site_name; ?>"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "<?php echo 'https://'.$_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; ?>",
"name": "Archives"
}
}
<?php } else { ?>
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "<?php echo 'https://'.$_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; ?>",
"name": "Page"
}
}
<?php } ?>]
}
</script>
<?php }
}
This will create a series of JSON-only breadcrumbs which are added to your site’s code automatically via
wp_footer()
, via Javascript, so they don’t actually display on your site but still make Google happy. This includes pages, posts, the blog home page (if different from the front page), category and tag pages, and archives. There’s even code in there for Woocommerce products and taxonomies, though you can remove that if you don’t use Woocommerce.
Make Google happy, keep your website clean and easy to read for users! Triple win for the goaaaaal!
0 Comments
Post a Comment