How to Implement and Customize Breadcrumbs Trails

Search Engine Optimization Success in 2015 needs many advanced tools like Structured Data Markup, Social Media Markup, JSON-LD Formats, Sitelinks Search Box, Rich Snippets, and Breadcrumbs.
Add all these tools to your website and configuring them correctly will make it looks very neat and increase the presence of your site in search results by well understanding the structure of your website.
We will learn together how to implement and customize breadcrumbs trails to fit your needs and make them suitable for your theme’s template.

What is Breadcrumbs Trails?

Breadcrumbs Trails (also known as Breadcrumbs Navigation) is a movement path helping users to know where is their location of homepage or other sections. It allows users to go up one level in the site hierarchy because it’s starting with the homepage goes through categories and ends up with the current page. It mostly appears above the post title or under headers for easily noticing.
Hint: Did you ever notice that breadcrumbs trails already used in your windows explorer.
Breadcrumbs navigation is generally specified by structure links path as the following:

Home Page > Section or Category Page > Single Page (current page)

Why You Should Have Breadcrumbs Trails?

It used more commonly in big sites like ebay or eCommerce websites because it has a huge number of sections (Products pages) which breadcrumbs will be a great choice to help users find their current locations.
and here is the most reasons for using breadcrumbs navigation:

• Help Google to understand your site structure
• Increase users experience by finding their locations easily
• Help crawler bots to find other pages connected to current page
• It gives search engines more understanding of internal linking in your site
• It gives more understanding (by users) for your site sections more than naked url
• Allow your visitors to track their movements and remember how they arrived at the current page

How to Implement Breadcrumbs Trails in WordPress?

The best and simplest way to implement breadcrumbs trails is Setting WordPress SEO by Yoast to add breadcrumbs code in your site.

#1: WordPress SEO Plugin Setting for Breadcrumbs Implementation

Install WordPress SEO plugin like any other normal plugin installation through “plugin installation page” in wordpress from Dashboard -> Plugins -> Add New

Then go to Dashboard -> SEO -> Advanced -> Breadcrumbs -> click on “Enable Breadcrumbs”

• Change Separator between breadcrumbs as you like (default is enough)
• Change Anchor text for the Homepage as you like (default is enough)
• Taxonomy to show in breadcrumbs for post types: make it “Category” to show categories links in the structure path of breadcrumbs

#2: Activate Breadcrumbs Function in WordPress

Now, lets activate Breadcrumbs function in your site by add the following code to single.php
But first we need to know where is the exact position in single.php should be placed in.

1. Open any post content in your site.
2. Right click on the title of the post and choose “Inspect Element”
3. A new temporary windows appear in the bottom of your browser
4. Your browser will navigate directly to the html responsible of your title appearance
5. Open “single.php” from Dashboard -> Appearance -> Editor
6. Find above html responsible of your title name (That you found it with Inspect Element)
7. Place the breadcrumbs php code just above it
8. Click on save button and check your post content for changes

Hint: we add the php code in “sinlge.php” because its the last page the user reach.

<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

#3: Customize Breadcrumbs by CSS

Lets customize it by contain it in div class attribute to call it with CSS position attribute. So, the final code should be as the following:

<div class="breadcrumbs">
<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?></div>

1. Open your main style sheet css file (should be named as style.css) from Dashboard -> Appearance -> Editor
2. Add the following css at the end

   .breadcrumbs { padding-bottom: 15px; }

3. Click on save button and check your post content for changes

Hint: You may change the css as you like to get the best position for breadcrumbs location. Also if you would like to center breadcrumbs in your page, Just add the following css to “style.css” file.

.breadcrumbs { text-align:center; padding-bottom: 15px; }

Reasons for Why Google isn’t Showing Breadcrumbs for Your Site in Search Results

Bad markup: You wanna make sure that you have required markup to work better with breadcrumbs, which will be implement automatically by wordpress seo and you can check it via Google tool if you have valid markup or not?.
Process take sometime: It just take a little while to process the stuff and see it cooperated into index, just relax.
Domain trust: Your domain doesn’t have much trust to show breadcrumbs in search results. I recommended to give it sometime to cooperate with index before you worry about this reason.

How to Add Breadcrumbs function without a plugin?

There are many webmasters doesn’t like plugin installation for just one function implementation, or maybe you are using another SEO plugin and you can’t use WordPress SEO by Yoast.
Here is step by step for how to creating breadcrumbs without a plugin.

Conclusion:

• Breadcrumbs navigation is a great way to increase visitors experience, don’t waste it.
• Add breadcrumbs trails takes less than 10 minutes but it will help search engines to understand your site structure.
• Structured Data is one of the important Google guidelines for SEO, keep following them to increase your site presence in search results.