How to add Breadcrumb navigation on your WordPress Site

Hola! Word “Breadcrumb” stands for trail of links that is helpful in tracing the user that in which page of site actually he/she is, means from homepage to particular page. Google loves structural navigation, so using breadcrumbs at your site it also raises your Google search result.

There are two most loved plugin for adding Breadcrumb at WordPress sites, first one is Yoast and 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 of installing separate plugin for Breadcrumb.

I am using Zita WordPress theme. Its a free theme loaded with lot of options for creating any type of website (Business, Shop, Blog).

Add Breadcrumb at your site:

  • Go to your Dashboard > Plugins and install Yoast Plugin.
  • Go to Dashboard > SEO > Search Appearance > Breadcrumbs > Breadcrumbs Settings and Enable it.
enable breadcrumb
  • Now add Yoast Code snippet at your theme file. We are adding breadcrumb in Zita theme, First download Zita child theme Download Link. Using child theme makes your changes update proof, always prefer to use 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 snippet in any part of file, it depends on your choice, Like where you want to display it. For example if you want to add breadcrumbs in all post then you can add code in single.php file, if you like to add in pages only then you can add it in page.php file and for adding breadcrumb navigation on whole site then you can add it in your header.php file.
  • I want to display breadcrumb at whole site, So firstly copy header.php file from parent theme and add it in your child theme, Because this file called in all pages. Open it in your favourite text editor now add following code snippet at the bottom of header.php file.
header file
  • By default it display with basic styling. To style it more just use following CSS id ‘#breadcrumbs’ and add your style in child theme style.css file or in Additional CSS area. Need more help in styling just contact to our support team, they will help you.
  • Here is the result.
breadcrumb 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.

Leave a Reply

Your email address will not be published. Required fields are marked *