How to Add Breadcrumbs in WordPress (3 Different Ways)

Editorial Staff

November 12, 2020

Do you want to add breadcrumbs to your WordPress site? If yes, then it’s a great idea for two major reasons: to enhance user experience and to get a better ranking on search engines. Breadcrumbs allow your site visitors to easily learn where they are. By clicking a link on the breadcrumbs, they can effortlessly switch to the parent category of the article they are reading to find other articles under the same category. While for search engines, adding breadcrumbs make it easier for search engines to better understand the link structure of your website, which is great in terms of SEO.

Although breadcrumbs are quite important, WordPress has no default features to add them. But it doesn’t mean you can’t add ones. In this article, we will show you to add breadcrumbs to your WordPress.

There are at least three ways to add breadcrumbs to WordPress:

  • Manually
  • Via Theme Customizer
  • By Creating a Custom Single Post Template

How to Add Breadcrumbs in WordPress Manually

Despite the “manual” method, you still need to install a plugin to add breadcrumbs. The plugin you need is Yoast. You have probably known about the plugin. Yoast is the most popular SEO plugin for WordPress. You need Yoast to add the breadcrumbs functionality, while to display the breadcrumbs themselves, you need to do it manually.

First off, install and activate the Yoast plugin. New to WordPress? You can read our previous article to learn how to install a WordPress plugin. Once the Yoast plugin is installed and activated, go to Yoast -> Search Appearance on your WordPress dashboard. Open the Breadcrumbs tab and enable the Enable Breadcrumbs option to enable the breadcrumbs functionality. Don’t forget to save the change by clicking the Save changes button.

Next, you need to edit a theme file where you want to display the breadcrumbs. In most cases, breadcrumbs are displayed in single posts so, in this article, we will show you to display breadcrumbs in single posts. In most WordPress themes, single posts are controlled by a file named single.php. To edit the file, go to Appearance -> Theme Editor on your WordPress dashboard (we use the Agency Plus theme in this example). Find the single.php file on the right sidebar and click it to edit it.

Add the following code to the file.

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

You can add the code above anywhere according to the area where you want to display the breadcrumbs. The example below will display the breadcrumbs before the content area. Click the Update File button to update the file.

Here is the result of the example of the placement above.

To change the separator between breadcrumbs (you can, for instance, use slashes instead of arrows as the separator), you can go to Yoast -> Search Appearance. From here, you can also set the content type archive to show in breadcrumbs for taxonomies.

How to Add Breadcrumbs via Theme Customizer

WordPress comes with a theme customizer feature which you can access via Appearance -> Customize. The customization options available on the theme customizer are varied depending on the theme you use. Some WordPress themes — such as Astra, Jupiter X, and Newspaper — offer an option to enable breadcrumbs in the single posts.

On the Astra theme, you can open the Breadcrumb block to enable the breadcrumbs. You can enable the breadcrumbs inside the header, after the header, or before the title (the title of the articles).

On the Jupiter X theme, you can enable the breadcrumbs from the Title Bar block.

How to Add Breadcrumbs by Creating a Custom Single Post Template

The last alternative to display breadcrumbs in WordPress is by creating a custom single post template (or any template where you want to display the breadcrumbs). To create one, you can use a WordPress theme builder plugin. A theme builder plugin allows you to create custom templates for your theme parts — such as header, footer, single post, and so on — without coding. Three examples of theme builder plugins are Elementor, Brizy, and Divi Builder. However, Divi Builder has no element to display breadcrumbs. So, your options are narrowed to Elementor and Brizy (read: Brizy vs Elementor). In this article, we will show you to create the custom single post template using Brizy.

By the way, you need to use the pro version of Brizy to able to create a custom single post template as the feature to create custom templates are only available on Brizy Pro.

Once the Brizy Pro is installed and activated on your WordPress site, go to Brizy -> Templates. Click the Add New button to create a new template.

Give your template a name and set the display condition on the Display Conditions section. Since you want to create a custom template for single posts, your display condition should look like the following.

You can click the Add button to add a display conditinon. Click the Publish button and then click the Edit with Brizy button to start editing the custom single post template using Brizy.

For more detailed instructions on how to create a custom single post using Brizy, you can read this article. In this article, we will go straight to adding the Breadcrumbs element. So. simply drag the Breadcrumbs element to the canvas area.

You can also read this article to style up the look of the breadcrumbs. You can set things like text color, typography (font style, font size, font family), and the arrow color.

Once you are done editing the custom single post template, you can click the Update button on the bottom-right corner on the Brizy editor.

The bottom line

Breadcrumbs are not a garnish. They have at least two roles as we mentioned earlier. Since WordPress has no default feature to add breadcrumbs, it takes an extra effort to add breadcrumbs to your website. You can use one of the methods we have covered above. If your theme offers an option to enable breadcrumbs, you can simply go to the theme customizer. Or, if you want to have more options to display the breadcrumbs (outside the single posts), theme builder is the best option as you can add the breadcrumbs anywhere you like.

This page may contain affiliate links, which help support UtilizeWP.

0 Comments

Submit a Comment

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

Share This