How to Add and Use Breadcrumbs in WordPress

Breadcrumb is a term in web design. Due to the ease of navigation, breadcrumbs are great for WordPress sites as they show the hierarchy of sites clearly to help visitors know where they have been and how to go back to a page visited before. Many beginners, however, may have not been able to understand the term well.

This post will dig into breadcrumbs, explaining what they are, discussing the benefits of using them, and showing the ways to add and use them on your WordPress site. Now we begin with the explanation.

What Are Breadcrumbs?

Breadcrumb, which is also called breadcrumb trail, is a navigation aid that allows you to track you locations on a website. With breadcrumbs, you can understand where you are quickly, and navigate back to all the previous pages that you need to go through to get to the current page. In a hierarchical site structure, you can see all the parent pages and categories for the page you are on.

Breadcrumbs are usually indicated by their link structures and displayed like navigation menus. They perform as great helpers that direct your visitors to specific pages, which improves the usability of your site to a large extent. Breadcrumbs are commonly displayed in this way.

Homepage > Category > Single page

The hierarchy separator can also be other glyphs such as “/” and “>>”.

What Are the Benefits of Using Breadcrumbs?

The most obvious benefit brought by breadcrumbs is the improvement of user experience. As is mentioned above, breadcrumbs not only help visitors know where they are, but also provide quick access to many other pages they may need to navigate to.

In addition, breadcrumbs also help with Google search results as they form a clear internal link structure which helps Google bots to crawl websites. With breadcrumbs, Google might not show your web pages in the search results with a single URL, but instead, it shows breadcrumbs, which helps people understand your site better and notice the related contents. The screenshot below is an example.

How to Add Breadcrumbs on Your WordPress Site?

You can do it manually, of course. However, as there are dozens of WordPress plugins which can be used to add the functionality easily, we would suggest you to use a plugin to save time and get rid of trouble. Among so many plugins, the first choice, we think, is WordPress SEO by Yoast which has almost 15 million downloads. This plugin has powerful breadcrumb functionality.

After installing the plugin and activate it, you can find WordPress SEO by Yoast in the plugin list. Now you need to click on the “Settings” link under the name of the plugin to start using it to optimize your website. On the new settings page, what you need to deal with is the link saying “Internal Links”.

Configure breadcrumbs

Clicking on the link mentioned before, you are led to a screen of the detailed settings for breadcrumbs. Here, you need to check the box next to “Enable Breadcrumbs”. For other options, you can do any customization as you like, and experiment more possibilities until the best match is found.

Insert PHP code in your theme

On the bottom of the setting page, you can see a line of code that the plugin asks you to insert into your theme. You have to add the code because only if when you have done that can the breadcrumbs configured before work on your site. You can make the breadcrumbs live on pages, posts and more, which depends on where you place the code. In below, we discuss how to add breadcrumbs on pages.

Taking Twenty Thirteen as an example, you need to edit the page.php file which is targeted at all pages on your site. You can edit it by using an FTP client or on your site directly by going to Appearance > Editor and opening the “Page Template” link in the right sidebar. Remember to make a copy of the file before inserting new code in case that there will be something wrong.

Now we add the code given on the settings page into the WordPress loop to make the theme display our breadcrumbs.

Once the theme file is updated, all of our pages now have breadcrumbs, with which there are navigation links as is showed below.

If you are not completely satisfied with the breadcrumbs, you can try the code at more other places and use different plugins to see which works best for you. The proper use of the feature can certainly help your visitors browse through your site easier, especially in the case that your site is in a large size.