Hola! Word “Breadcrumb” stands for the trail of links that are helpful in tracing the user to which page of the site he/she is, which means from the homepage to a particular page. Google loves structural navigation, so using breadcrumbs on your site also raises your Google search results. We can also say Breadcrumbs are used as a secondary navigation that helps users easily understand the relation between their location on a page and higher-level pages.
There are the Following benefits of using Breadcrumbs –
- Location or Hierarchy-Based Breadcrumbs.
- Encourages Browsing and Reduces Bounce.
- Improves Findability of Your Website in Google Search.
- Breadcrumbs Provide SEO Benefits.
- Breadcrumbs Help Reduce User Anxiety.
There are two most loved plugins for adding Breadcrumb to WordPress sites, first one is Yoast and the second one is Breadcrumb Nav Next.
In this article, I will show you how to add Breadcrumb using Yoast plugin. It is a common plugin used for SEO. So there is no need to install the separate plugin for Breadcrumb.
I am using the Zita WordPress theme. It’s a free theme loaded with a lot of options for creating any type of website (Business, Shop, Blog).
Add Breadcrumb to Your Site:
- Go to your Dashboard > Plugins and install Yoast Plugin.
- Go to Dashboard > SEO > Search Appearance > Breadcrumbs > Breadcrumbs Settings and Enable it.
- Now add the Yoast Code snippet to your theme file. We are adding breadcrumb in the Zita theme, First download the Zita child theme Download Link. Using a child theme makes your changes update-proof, always prefer to use a child theme when you are making any changes in theme files.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>- You can add code snippets in any part of the file, it depends on your choice, Like where you want to display it. For example, if you want to add breadcrumbs in all posts then you can add code in a single.php file, if you like to add in pages only then you can add it in the page.php file and for adding breadcrumb navigation on the whole site then you can add it in your header.php file.
- I want to display breadcrumbs on the whole site, So firstly copy the header.php file from the parent theme and add it to your child theme, Because this file is called in all pages. Open it in your favorite text editor now add the following code snippet at the bottom of the header.php file.
- By default, it displays with basic styling. To style it more just use the following CSS id ‘#breadcrumbs’ and add your style in the child theme style.css file or in the Additional CSS area. Need more help in styling just contact our support team, they will help you.
- Here is the result.
Final Words – Hope this article save your time in adding breadcrumb at your site, I’m waiting for your feedback make a comment let me know your experience.
Read More –
This blog mentioned very easy trick to add breadcrumb navigation on wordpress. I applied these steps and it’s very helpful to me. Thanks for sharing your informative article to us. Keep sharing!