VictorVijay

How to add [BreadCrumbs] navigation to WordPress Website

How to add breadcrumbs to wordpress

 

Did you know what website breadcrumbs are?

They simply form a secondary navigation bar that makes your visitors understand your website structure and easily navigate through it.

Many WordPress themes do not include breadcrumbs in its design.

If you don’t see breadcrumbs on your blog, then this post is for you.

Do you want to add this tiny feature that makes improvement in your visitor engagement?

You can quickly add breadcrumb support to your theme in just 2 easy steps.

Let’s get started……..

What are website breadcrumbs?

Breadcrumbs are the secondary navigation elements that show the user where they are currently on a website.

The breadcrumbs path clearly indicates the structure of the website.

Have a look at this breadcrumbs example on neilpatel.com:

breadcrumbs example

It plainly shows that we are currently reading an article from category content marketing which lies on Blog directory of NeilPatel.com(Home).

Each element of the breadcrumb from the left except the last one is a clickable link.

This ensures easy navigation of the user on the website.

For example, If you want to read more articles about content marketing, you can easily do so by clicking on content marketing breadcrumbs link.

Each link is usually separated by a greater-than sign.

Why should you add breadcrumbs to your website?

They are officially recommended by Google for better navigation and SEO purposes.

Here is web snap from Google’s starter guide for SEO about breadcrumbs:

Why fall short of something which Google recommends to add to your website?

Without any ado, add it to your blog today itself just in 5 minutes.

Benefits of adding Breadcrumbs to your blog:

Better Navigation: Your visitors can easily navigate through your blog and understand your blog’s structure better.

Decreased bounce rate: Your visitors stick to you like super glue when you provide an easy way for them to access all of your content.This increases your visitors’ time on site which leads to less bounce rate. Less bounce rate implies more trust signals to Google for better rankings.

Compliance with Google’s recommendation: Every website wants to be loved by Google.

By adding breadcrumbs, you won’t fall short of a tiny thing for which you may need to think in future.

Reduces clicks or actions: Breadcrumbs reduce clicks or actions to higher level pages of your website.Instead of accessing the primary navigation, they can easily use breadcrumb links.

Not much space required for them: They just need a single horizontal line of links at the top of your post. If you design it well with CSS code, they look appealing.

Now if you are convinced enough of the importance of this tiny feature, let’s see how to easily add them to your WordPress website.

Improved on-page SEO: Breadcrumbs help your blog’s on-page SEO by making a strong INTERNAL LINKING. This happens because every page will have an internal link to the appropriate category and homepage of your blog.

Want a free valuable advice on improving your blog on SEO, Design, and Income?

(I will visit your blog and will personally advise you on improving your blog’s income for free)

How to add Breadcrumbs to WordPress website:

There is an easy way to automatically add breadcrumbs to every page or post of your website.

The way is by using an advanced feature of Yoast SEO plugin.

I guess you are already using Yoast SEO plugin on your website.

If not, install it today because it’s a wonderful plugin with awesome features.

Requirements:

  • Installed Yoast SEO plugin
  • Admin access to add a bit of PHP code to your theme’s header.php file or file of any location you wish to add breadcrumbs

Let’s get started to add breadcrumbs to your website.

Step#1: Enable breadcrumbs setting of Yoast SEO plugin:

Follow this navigation on the WordPress dashboard:

Yoast SEO plugin icon>>SEO settings>>Advanced>>Breadcrumbs

You will be taken to the breadcrumbs settings screen and the recommended setting are

Enabling breadcrumbs Yoast SEO plugin setting

Enable breadcrumbs: Enabled

Separator between breadcrumbs: >>(you can type your own separator)

Anchor text for the home page: Blog (my home page is blog.Use your own)

Prefix for the breadcrumb path: You are here (type your own prefix)

Bold the last page:( select Bold or Regular)

Taxonomy to show in breadcrumbs: Category

Other settings are filled by default. Leave them as they are.

Click on Save button and that’s it, you have enabled breadcrumbs to feature on your website.

Now, you need to add some PHP code to display this enabled breadcrumb on your pages.

Step#2: Adding PHP code to display breadcrumbs:

The PHP code recommended by Yoast SEO to add breadcrumbs is:

<?php
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb(
<p id=”breadcrumbs”>’,‘</p>
);
}

?>Add the above PHP code to your child or parent theme’s Header.php file at the end.

Note: Avoid any other probable mistakes while adding this code to the header.php file.Otherwise, your website may crash if you make any syntax errors.

How to add PHP code to your theme Header.php file:

Login to WordPress dashboard.

Move cursor to Appearance. Click on the editor. The theme editor screen will open.

editor wordpress header file

 

Select the active theme of your website to which you want to add breadcrumbs code.

Look for header.php in the parenthesis(header.php). Click on Theme Header as shown.

You will see a caution message saying: ”editing this file is not recommended. Proceed with caution”. (This means only developers are recommended to edit this file.You have got a verified code from Yoast SEO itself. Therefore, proceed without any worry)

Click on proceed button and scroll your way down to the end of the file.

Copy and paste the above code at the end and click on Update File button.

adding breadcrumbs code

That’s it, you will see breadcrumbs on your blog right below the header.

You can use CSS code to improve the appearance of your breadcrumbs.

If you don’t have the basic knowledge of CSS code, just fill the contact form in a minute, I am ready to help you.

Preview of Yoast SEO breadcrumbs:

I have added Yoast SEO breadcrumbs on my blog at the beginning of post header.

Breadcrumbs on my website before adding any CSS styles look this:

breadcrumbs preview on victorvijay.com

Yoast breadcrumbs are added as a single line of paragraph.

This is a simple and effective way of adding them to a website.

Bonus: Bootstrap Breadcrumbs HTML and CSS code:(source)

If you have admin access to adding HTML and CSS code to your website, you can add awesome breadcrumbs to your website.

Have a look at this breadcrumb style:

arrowed breadcrumbs preview

Want to add this style?

You need to add Some HTML and CSS code to your website to add the above good looking breadcrumb.

HTML code for above Bootstrap breadcrumb:

Add this HTML code to wherever you want this breadcrumb to be displayed.

<div class="container">

<ol class="breadcrumb">

<li><a href="#">Home</a></li>

<li><a href="#">Library</a></li>

<li class="active">Data</li>

</ol>

</div>

<div class="container">

   <ol class="breadcrumb breadcrumb-arrow">

<li><a href="#">Home</a></li>

<li><a href="#">Library</a></li>

<li class="active"><span>Data</span></li>

</ol>

</div>

Replace Home. Library and data with your own pages.

CSS code for Bootstrap Breadcrumb:

Apply this CSS code to your website CSS files to achieve the above arrow styles.

 

body{

padding-top: 50px;

}

.breadcrumb-arrow {

height: 36px;

padding: 0;

line-height: 36px;

list-style: none;

background-color: #e6e9ed

}

.breadcrumb-arrow li:first-child a {

border-radius: 4px 0 0 4px;

-webkit-border-radius: 4px 0 0 4px;

-moz-border-radius: 4px 0 0 4px

}

.breadcrumb-arrow li, .breadcrumb-arrow li a, .breadcrumb-arrow li span {

display: inline-block;

vertical-align: top

}

.breadcrumb-arrow li:not(:first-child) {

margin-left: -5px

}

.breadcrumb-arrow li+li:before {

padding: 0;

content: “”

}

.breadcrumb-arrow li span {

padding: 0 10px

}

.breadcrumb-arrow li a, .breadcrumb-arrow li:not(:first-child) span {

height: 36px;

padding: 0 10px 0 25px;

line-height: 36px

}

.breadcrumb-arrow li:first-child a {

padding: 0 10px

}

.breadcrumb-arrow li a {

position: relative;

color: #fff;

text-decoration: none;

background-color: #3bafda;

border: 1px solid #3bafda

}

.breadcrumb-arrow li:first-child a {

padding-left: 10px

}

.breadcrumb-arrow li a:after, .breadcrumb-arrow li a:before {

position: absolute;

top: -1px;

width: 0;

height: 0;

content: ”;

border-top: 18px solid transparent;

border-bottom: 18px solid transparent

}

.breadcrumb-arrow li a:before {

right: -10px;

z-index: 3;

border-left-color: #3bafda;

border-left-style: solid;

border-left-width: 11px

}

.breadcrumb-arrow li a:after {

right: -11px;

z-index: 2;

border-left: 11px solid #2494be

}

.breadcrumb-arrow li a:focus, .breadcrumb-arrow li a:hover {

background-color: #4fc1e9;

border: 1px solid #4fc1e9

}

.breadcrumb-arrow li a:focus:before, .breadcrumb-arrow li a:hover:before {

border-left-color: #4fc1e9

}

.breadcrumb-arrow li a:active {

background-color: #2494be;

border: 1px solid #2494be

}

.breadcrumb-arrow li a:active:after, .breadcrumb-arrow li a:active:before {

border-left-color: #2494be

}

.breadcrumb-arrow li span {

color: #434a54

}

Final thoughts on breadcrumbs:

BreadCrumbs are tiny part of your website that help you in numerous ways.

Many WordPress themes do not support this important design element.

But, you need not sit back and keep saying “I am not a developer”. You can easily add breadcrumbs to your website as I have shown here.

Do try this easy way and let me know if you get any problems in the process.

Other WordPress design improvements you may be interested to read:

How to convert WordPress links to call to action button links

Write post in Google docs and import to WordPress in a minute

Subscribe to learn SmartBlogging that makes Momey

Enter your email address to subscribe to this blog and get first time access to awesome posts right in your inbox

Updated: November 5, 2017 — 5:01 pm

The Author

Vijay

Vijay is a tech savvy guy working as Assistant Manager with a Hydro Power Company owned by Govt of India . He is a passionate blogger committed to build an awesome online resource to solve day to day problems of other bloggers. He transparently shares working techniques to take your blog to the next level.You can contact him by filling the contact form

2 Comments

Add a Comment
  1. Great info..Thank you for sharing..

  2. thank you for sharing this information with us.
    we are very glad to inform you that it is very useful for us.

Leave a Reply

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

VictorVijay © 2017 || Back to top || Privacy Policy || sitemap
%d bloggers like this: