How to Add Breadcrumbs in WordPress Site?

Breadcrumbs are the navigational structure helping users to understand where exactly they are on the site. This is something like a “You are here” pin on the map indicating where you are and where you can go further from that place. Though the basic header and sidebar navigations may be sufficient in certain cases adding breadcrumbs in WordPress site will boost the professional look of the site. Breadcrumbs can be either horizontal or vertical based on your need. Here we will focus more on the horizontal one placed just above the article to catch user’s attraction.

Why to Add Breadcrumbs in WordPress Site?

If you are thinking breadcrumbs as an additional code on your site below are some reasons why you definitely need that code on your site to add breadcrumbs.

• Adding breadcrumbs in WordPress site helps users to access the higher-level categories especially for the sites having complex hierarchical structure. This may not be possible with the default navigations for each individual page on the site.
• Since breadcrumb is a structured date, search engines may show breadcrumbs in the search results and the keywords in the breadcrumbs can boost your ranking. Users can also understand the relative structure of the site from the search results display before they click and land on the page.

• Some search engines like Bing search even shows the breadcrumbs with clickable links allowing users directly navigating to the category if they want.
• Breadcrumbs boost the overall SEO of the site by improving time on site through user engagement and making the search results contemporary.

How to Add Breadcrumbs in WordPress Site?

Breadcrumb is part of most of themes by default including the latest twenty fifteen WordPress theme. If you are looking for a theme it is wise to choose a theme having default breadcrumb structure.

Though most of themes can support basic breadcrumb navigation it may not be sufficient for your need. for example, what if you want to place the breadcrumb trail in a sidebar widget? Here you have the solution in the form of plugins. Navigate to “Plugins > Add New” in your WordPress admin dashboard and search for the word “breadcrumb”. There are plenty of free plugins for this purpose and install the one you like, here we explain with the Breadcrumb NavXT plugin.

Once installed and activated the “Breadcrumb NavXT” plugin, navigate to the menu “Settings > Breadcrumb NavXT” to check and adjust the settings.

Then go to theme editor using the menu “Appearance > Theme File Editor” and open “header.php” file. Paste the below code in appropriate place and save the file.

<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

Check out your site to see the breadcrumbs on each post. Note that you may need to try out with your code placement to get the correct the alignment of breadcrumbs on a published site. The file may be “header.php” or “single.php” or any other theme file based on your need and installed theme layout. You can also customize the CSS to create a box effect and adjust the style parameters.

Using SEO Plugins

Nowadays, almost all SEO plugins come with an option to insert breadcrumb in your WordPress site. For example, you can enable the breadcrumb “Yoast SEO > Search Appearance > Breadcrumbs” if you are using the popular Yoast SEO plugin. After that, you need to insert a piece of PHP code in your theme’s template file as explained above. You can learn more on how to add Yoast breadcrumbs in WordPress site.

The advantage of using Yoast or Rank Math is that you have an option to select the primary category to show in breadcrumb for each post. This is useful when you have assigned multiple categories to a post and wanted to show a specific parent/child category in your breadcrumb trail.

Using Theme Settings

Depending upon the theme you use, it may support automatically inserting breadcrumb in the layout.

• Most of the magazine and news WordPress themes offer in-built breadcrumb structure as part of the theme.
• Some themes like Astra integrates Yoast and other SEO plugin’s breadcrumb code.
• Finally, themes like GeneratePress supports hooks using which you can insert the breadcrumb code from the plugin.

In all the above cases, you do not need to add the code manually in theme’s file which will reduce your work. Therefore, make sure to check whether your theme supports breadcrumb feature and make use of that instead of using additional plugin.

Breadcrumbs – A Word of Caution

• Generally when a single post is connected to multiple categories most breadcrumbs show the category falling first as per alphabetical. For example, if a post is linked to two categories “WordPress” and “AdSense”, most probably the breadcrumb trail will show “AdSense” even though the article is more relevant to “WordPress”.
• Some plugins even show all linked categories to the post in the trail and defeat the purpose of the breadcrumb. This will only confuse users instead of offering easy navigation.
• Check the placement of the breadcrumbs in mobile devices.
• Check the responsiveness of breadcrumb trail in various screen size and devices.
• Make sure to select simple separators like hyphen or pipeline as Google does not support other symbols.
• Add the PHP code in correct file and location. You entire site may be down if you add the code incorrectly.