How to Implement and Customize Breadcrumbs Trails

Search Engine Optimization Success in 2015 needs many of advanced tools like Structured Data Markup, Social Media Markup, JSON-LD Formats, Sitelinks Search Box, Rich Snippets and Breadcrumbs.
Add all these tools into your website and configure 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 it suitable for your theme’s template.

How to Implement and Customize Breadcrumbs Trails

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 homepage going through categories and end up with current page. It mostly appear above 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:


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 fromDashboard -> 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, let’s activate Breadcrumbs function in your site by add the following code to single.php
But the 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 “single.php” because it’s the last page the user reach.



#3: Customize Breadcrumbs by CSS

Let’s 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:


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.