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 “Yoast SEO” or look under the “popular” tab to find “Yoast SEO” plugin. Install the plugin and activate it on your site.
How to Enable Breadcrumbs?
Once the plugin is activated it will add a new navigation menu with the name “SEO”. Go to “SEO > Search Appearance” menu and then navigate to “Breadcrumbs” tab.
Scroll down to bottom and set “Enabled” option for “Enable Breadcrumbs for your theme”. Below are some of the customization options available with Yoast breadcrumb which will be 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 for each content type and taxonomy.
Save your changes and the next step is to add the breadcrumb code in your theme file. Note that Yoast SEO plugin also add some customizing options under “Appearance > Customize > Yoast SEO Breadcrumbs” section. The setup from the plugin’s settings page will automatically appear here which you can change if needed.
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 one of the default WordPress themes 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:
Most of the latest WordPress themes allow using hook to insert code in the desired position of the site’s layout instead of editing functions.php file. For example, you can use hook in GeneratePress theme to add Yoast breadcrumb as explained in this article. Few other themes like Kadence, allows to select the breadcrumb option from few popular plugins like Yoast SEO and automatically insert in the desired position for you.
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 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.
1 Comment
Leave your reply.