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.
- Adding breadcrumbs in WordPress site helps users to access the higher-level categories, especially for those sites having a complex hierarchical structure. This may not be possible with the default navigations for each individual page on the site.
- Since breadcrumb is a structured data, 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 your site right from the search results display before even 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 your site by improving time on site through user engagement.
How to Add Breadcrumbs in WordPress Site?
There are multiple ways available and you can chooses the one depending on your needs.
1. Using the Breadcrumbs Block
WordPress introduced a new Breadcrumbs If you are using in version 7.0 and you can make use of this block.
- If you are using a non-block-based theme like Astra or GeneratePress, simply insert the Breadcrumbs block in Gutenberg editor when editing a post. You can customize the font size, separator, and background from the block’s settings. Unfortunately, you need to add the block per post and also within the content area (not above the title). You can save time by creating a pattern and reuse instead of inserting the block on each post.
- If you are using a block-based theme, this block will be much useful. Go to “Appearance > Editor > Templates” and open “Single Posts” template.
- Insert the Breadcrumbs block just above the title and customize to blend with the post’s content. Save your changes and the breadcrumb structure will be inserted on all posts. You can easily customize and change the placement centrally without editing each posts.
2. Using Theme Settings
Breadcrumb is part of most commercial themes by default. So, if you are looking for purchasing a theme, it is wise to choose a theme having a default breadcrumb structure.
- 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.
3. Adding Breadcrumbs Using a Plugin
Though most of the themes support basic breadcrumb navigation, it may not be sufficient for your needs. 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 Plugin” 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 will 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 at the end 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.
4. Using SEO Plugins
Nowadays, almost all SEO plugins come with an option to insert breadcrumb in your WordPress site. For example, if you are using the popular Yoast SEO plugin, simply go to “Yoast SEO > Settings > Advanced > Breadcrumbs” and turn on “Enable breadcrumb for your theme” option. Customize the separator and other text fields if needed.
After that, you need to insert a piece of PHP code in your theme’s functions.php file. Themes like Astra offers a setting allowing you to select the breadcrumb’s source from plugins like Yoast SEO or Rank Math thus removing the hassle of manual PHP code insertion.
Otherwise, you need to manually insert the code as explained in this article.
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”. You can avoid this issue with Yoast SEO or Rank Math plugin by assigning a “Primary Category” to show in breadcrumb for each post.
- Some plugins even show all linked categories to the post in the trail and defeat the purpose of breadcrumb. This will only confuse users instead of offering easy navigation.
- Check the placement of the breadcrumbs on mobile devices.
- Check the responsiveness of breadcrumb trail on various screen sizes and devices.
- Make sure to select simple separators like hyphen or pipeline as Google does not support other symbols.
- If you are using the code snippet, make sure to add the PHP code in correct file and location. Otherwise, your entire site may go down if you add the code incorrectly.
