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.
Table of Contents
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:
- Add separator between breadcrumbs level, it could be symbols like >, <, – or anything.
- Enter the anchor text to be shown for the “Home” page.
- Add prefixes for the breadcrumb paths on various pages like home, archives, 404 page, etc.
- You can enable or disable the “Blog” page from the breadcrumbs.
- If you want highlight the title in the breadcrumb by making it bold.
- Choose the taxonomy and post type to be shown in the breadcrumb.
Save your changes and the next step is to add the breadcrumb code in your theme file.
Adding Breadcrumb 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.
Note: Ensure to paste the PHP code in appropriate place to avoid the entire site going down.
Google will show the breadcrumb in search results as below:
Related Articles:
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 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.
Final Words
Earlier days, Yoast breadcrumb was one of the easily available options for WordPress uses to insert breadcrumb on their site. Since the plugin helps you to choose the primary category when you have multiple categories for a post, you can show the primary category in breadcrumb. However, nowadays many WordPress themes, especially SEO agency and magazine themes offer breadcrumb as an in-built function. Therefore, make sure to use Yoast breadcrumb only when you do not have this option available in your theme.
Leave a Reply
Your email is safe with us.