Adding Breadcrumb in WordPress Using Yoast SEO Plugin

Breadcrumbs help user to navigate through your site easily and make the search engine results contemporary by displaying the breadcrumb trail. Though most of the themes offer breadcrumb as a default feature you may not have complete control over it on page-by-page mode. WordPress SEO plugin by Yoast is a power pack to boost SEO of your WordPress site and offers simple and effective way to handle breadcrumbs better than dedicated plugins for creating breadcrumbs. In this article we will discuss how to add breadcrumb in WordPress using Yoast SEO plugin along with customizing options.

Installing WordPress SEO Plugin

Login to your WordPress admin dashboard and navigate to “Plugins > Add New” menu. Search for “WordPress SEO” or look under the “popular” tab to find “WordPress SEO by Yoast” plugin.

Install the plugin and activate it on your site.

How to Enable Breadcrumbs?

Once the plugin is installed it will add a new navigation menu with the name “SEO” and go to “SEO > Advanced” option.

Click on the checkbox “Enable Breadcrumbs” and customize your settings. Below are the options you can customize and applicable throughout your site:

Save your changes and the next step is to add the breadcrumb code in your theme file.

Adding Breadccrumb Code in Single.php

In order to activate the breadcrumbs functionality on your WordPress site using Yoast SEO plugin, you need to add the following PHP code in the core theme file. You can do this on your child theme files or directly on the parent theme file. Based on the location needed, you may need to paste the below code under “header.php” or “single.php” file. In most cases, you need to place the code under “single.php”. Copy the below code:

<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

Navigate to “Appearance > Editor” and look for “single.php” file. Paste the code just above the post title and save your changes by clicking on “Update File” button.

In case if the breadcrumb is not aligning on your published post then you may need to adjust the location of the code accordingly. For example, below is the breadcrumb display in twenty fifteen theme when the code is placed inside “single.php” file.

Google will show the breadcrumb in search results as below:

Customizing Breadcrumbs with CSS

Adding the PHP code will create a bare breadcrumbs with links. You can add custom CSS classes to decorate your breadcrumbs otherwise just use the same PHP code in “single.php” and add the following CSS code under your theme’s “style.css” file or under custom theme section of your theme options (if your theme supports).

#breadcrumbs {
box-shadow: 1px 1px #d5d4d4;
background: #eeeded;
border: 1px solid #eeeded;
border-radius: 5px;
padding: 0 5px 0 10px;
font-size: 16px;
}

It will produce the breadcrumbs like below and you can customize the CSS according to your need.

Changing the Post Title in Breadcrumb

Sometime the actual post title may be very long and you want to cut off to shorter title only in the breadcrumb display. Yoast SEO plugin will create a meta box in WordPress visual editor and offer various features applicable at page level.

When you are creating or editing a post, go to “Advanced” tab in WordPress SEO plugin meta box and enter the required breadcrumb title for that page. This will be displayed in the breadcrumb trial instead of the actual post title.