How to Add WordPress Breadcrumbs – A Beginner’s Guide

Managing large websites with multiple levels can be quite difficult. If your content is mixed with various types of products and content provided, ones which are not related to each other, it can be hard to create simple navigational features. Furthermore, browsing these large multi-level websites can be a chore. Thus, we introduce the use of WordPress Breadcrumbs.

What are Breadcrumbs WordPress & Why Should We Use Them?

By definition, Breadcrumbs are interconnected links created for navigational purposes. They are a series of connected weblinks that provide information to website viewer about which page they currently are on or what level they are browsing. This kind of hierarchical navigation allows you to provide a website design with various levels, categories, sub-content and more while ensuring that the viewer will not be lost on your immensely large website.

These features are highly important in large websites as well as eCommerce websites. These websites include various listings for all kinds of products and are filtered to different levels to easily separate the type of products you are selling.

For example, let’s take Amazon. The world’s leading eCommerce website sports products from all over the world and goods of every type and purpose. Thus, the website is separated into different levels and types of products. Now if we were to click on any product, it would clearly show us what level the product, subcategory and specific purpose the product falls under.

This is here is a breadcrumb or a breadcrumb trail, which allows you to easily navigate through the whole website while still remaining in the right section.

So, by using breadcrumbs you can ensure that your viewers do not get lost in a large number of content or products on your website and can find what kind of content they are looking at using the listings.

Enabling Breadcrumbs

WordPress Breadcrumbs can be enabled easily by a two-way process using plugins. The first step involves enabling the correct plugin and setting it up and the second step involves us placing the plugin’s code in the header.php file of your theme.

BreadCrumbs plugins

There are many plugins available dedicated to building breadcrumbs. We’ve selected a few of them based on community reception, ease of use and features provides. Most of these plugins share their method of usage. You are free to experiment with some of these to ensure that the plugin you use is fit for you to use.

Yoast SEO

The complete answer to SEO and all its related issues, Yoast SEO provides users ways to enrich their website with Yoast elements, create SEO friendly posts/ blogs and more. From creating Meta descriptions to SEO titles to XML sitemaps, Yoast SEO provides tools for all.

Yoast SEO also includes a powerful feature to enable breadcrumbs on your website. You can easily modify the breadcrumbs links; customize the prefixes, 404 links, search page links, anchor text and more with this highly versatile plugin.

Learn-More-Download

Breadcrumb NavXT

The most popular breadcrumbs dedicated plugin in WordPress, Breadcrumbs Navxt is the one of the more feature enriched Breadcrumbs plugin available. The successor to Breadcrumbs NavigationXT provides the users to create highly customized breadcrumb trails. From separate templates for Blogs, pages, posts, attachments and more, you can easily build various breadcrumb trails for various purposes using this powerful plugin.

The plugin provides users options to create personalized templates for all kinds of elements on your website, from Topics to tags to categories to author archives. Furthermore, all these settings can be exported, saved and imported whenever required.

Learn-More-Download

Breadcrumb Trail

Competing with these two plugin giants, Breadcrumb trail takes pride in being one of the most robust and advanced breadcrumb plugins out there. Breadcrumb trail helps you provide viewers highly accurate breadcrumbs for each and every webpage on your website.

The plugin auto detects your permalink setup and creates breadcrumbs based on it. The plugin detects your site hierarchy and create unique sets of breadcrumbs based on it. Detecting custom post types, taxonomies, categories, etc. it calls to do it all. Its easy options and settings page provides you all the necessary options in an easy to understand interface. Administrative access option allows developers to directly access the classes to manipulate any feature directly.

Learn-More-Download

Setting up the plugin:

For this demonstration, we will be using Yoast SEO’s breadcrumbs feature.

First of all, we require the plugin itself, so install Yoast. If you don’t know how to do so, consider reading this article.

Next up, configure Yoast to fit your website’s needs. To learn more about this process, read here.

Then, you need to enable breadcrumbs from Yoast’s settings.

For this, open WordPress admin dashboard, hover over Yoast SEO listing and click on Search appearance.

Then, click on Breadcrumbs listing given in the menu and click on Enable breadcrumbs.

The rest of the settings allows you to personalize the breadcrumbs itself.

Breadcrumbs personalization options

Separator: This is the separator that shows up between the links, you can change it to any character you prefer. Useful options are “:”, “-“, “<<”, “>>”

Anchor text for home page: The link text shown for your Home page on the path.

Prefix for path: This lets you customize the text that shows up before your breadcrumb path. You can leave it empty or insert any text of your preference.

Prefix for archives: This option is similar to above, but it is shown separately for archives.

Prefix for search pages: This is the prefix text shown exclusively for Search pages.

Breadcrumb for 404 pages: The breadcrumb path shown for pages or posts that do not exist.

Show blog page: Lets you show or hide the blog pages in the breadcrumbs.

Bold the last page: Lets you bold the last page which makes it more convenient for navigation.

Click on Save changes on the bottom of the page once you are done customizing the settings.

This will allow you to enable Breadcrumbs on your website. To activate it, you need to follow another step.

Enabling Breadcrumbs on your website

For this, we need to place a few lines of code onto our theme files. These are codes that call to the plugin to insert the breadcrumbs wherever necessary. For every plugin, these codes might differ and they are usually provided in the details or the documentation for the corresponding plugin.

For Yoast SEO, we use:

<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb(' ',' '); } ?>

First, we need to open your theme editor. For this, use the WordPress dashboard and hover over Appearance and click on Editor.

Now we define where to insert our breadcrumbs. If you want it enabled on your entire website, we place it in the Theme header or header.php file using the Theme files on the right.

We can also enable breadcrumbs on Single posts only by inserting the code to Single post file or single.php.

Open the respective file you intend to insert the code into.

Now we decide what part of your web page should show the breadcrumbs links. This depends on user preference but we suggest placing it high up on the webpage, preferably below the headers.

Now we simply place the code onto the file. For demonstration, we have chosen the h file as our destination.

This should enable Breadcrumbs on your website.

Concluding:

Thus in this post, we have highlighted the need and use of WordPress breadcrumbs and how to enable them on your website. Always ensure that you place your Breadcrumb links or trails in a convenient place on the webpage. Breadcrumbs should be easily viewable without searching for them and should be in distinct places such as headers, above your posts and content and such.

If you want to learn how to insert more useful features and elements on your website, consider reading some of these articles:

• How to change WordPress Usernames
• Changing Font size in WordPress
• How to add WordPress menu title attribute