How to use PHP to add breadcrumbs to your WordPress theme

Posted on 13 March 2023

If you’re using WordPress for your website or blog, you’re likely familiar with Yoast SEO plugin.

One of the features of Yoast SEO is the breadcrumb trail, which helps visitors navigate your site and understand where they are in the site hierarchy. While Yoast SEO automatically generates breadcrumbs for most themes, if you’re using a custom WordPress theme, you may need to use a PHP function to display the breadcrumbs. In this article, we’ll walk you through the steps to add Yoast breadcrumbs to your custom WordPress theme.

Understanding the Yoast Breadcrumbs Functionality

Before we begin, let’s take a moment to understand what breadcrumbs are and why they are important. Breadcrumbs are a navigation aid that shows the visitor where they are on your website. They appear as a series of links at the top of a page, typically just below the header. For example, if you’re on a blog post, the breadcrumb trail might look like this:

Home > Blog > Category > Post Title

This lets the visitor know that they are on a blog post, which is part of a category, which is part of the blog, which is part of the home page. Breadcrumbs help visitors navigate your site and understand its structure, which can improve the user experience.

Yoast SEO includes breadcrumb functionality that automatically generates the breadcrumb trail based on the page’s location in the site hierarchy. However, this functionality doesn’t always work with custom WordPress themes. In this case, you can use a PHP function to manually display the breadcrumbs.

Adding the Yoast Breadcrumbs Function to Your Theme

To add the Yoast breadcrumbs function to your custom WordPress theme, follow these steps:

Edit your Theme’s functions.php File

The first step is to add the breadcrumbs function to your theme’s functions.php file. You can access this file through your WordPress dashboard by going to Appearance > Editor, or by accessing the file via FTP. Once you’ve opened the file, add the following code:

<?php function my_yoast_breadcrumb() { if ( function_exists( 'yoast_breadcrumb' ) ) { yoast_breadcrumb( '','' ); } } ?> 

This code defines a function called my_yoast_breadcrumb() that checks if the Yoast breadcrumb function exists, and if it does, calls it and wraps the result in a <div> tag with a class of “breadcrumbs”.

Add the Breadcrumbs Function to Your Theme’s Template Files

The next step is to add the breadcrumbs function to the appropriate template files in your theme. You’ll need to add the function to the header.php file, where you want the breadcrumbs to appear. You can add the function before or after the header content, depending on your preference. Here’s an example of how to add the breadcrumbs function to your header.php file:

<?php if ( function_exists( 'my_yoast_breadcrumb' ) ) { my_yoast_breadcrumb(); } ?> 

This code checks if the my_yoast_breadcrumb() function exists, and if it does, calls it to display the breadcrumbs.

Style the Breadcrumbs

These styles set a background color for the breadcrumbs, add padding and increase the font size, make the font bold and uppercase, and set the link colors. You can adjust these styles to match your site’s design.

.breadcrumbs { background-color: #f2f2f2; padding: 10px; font-size: 14px; font-weight: bold; text-transform: uppercase; } 

.breadcrumbs a { color: #333; text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } 

Test the Breadcrumbs

Once you’ve added and styled the breadcrumbs function, it’s important to test it to ensure it’s working correctly. Navigate to your site and visit a few pages to make sure the breadcrumbs are displaying correctly and linking to the correct pages. Congratulations! You’ve successfully added Yoast breadcrumbs to your custom WordPress theme.

FAQs

---