Add Breadcrumbs to WordPress Website

If you are looking to add breadcrumbs to the WordPress website, you are in the right place. Breadcrumbs are just good for the user experience, So if you want to add this feature to your website, that’s good.

In this article, I am going to explore all methods of adding breadcrumbs to WordPress sites.

Adding Breadcrumbs Using Theme Customization

Some WordPress themes have an inbuilt breadcrumbs feature, and you need to activate the feature. Like the Astra theme, they have an inbuilt feature for breadcrumbs.

So, how can you enable this feature? If your WordPress theme has this feature need to go to the theme setting, or as I am using the Astra theme, if you are using the same, then navigate the WordPress dashboard to Appearance > Customize > Breadcrumbs (above in the Image). Now you can customize the breadcrumbs positions, typography, and colors.

If you are not using any theme those do not have the breadcrumbs feature, then follow the next methods.

Adding Breadcrumbs Using SEO Plugins

Most WordPress website owners using an on-page SEO plugin like Rank Math SEO or Yoast SEO plugin. If you don’t know, I want to tell you both of the plugins has the feature of breadcrumbs. You need to add a line of code in your WordPress theme function.

If you are using one of the plugins, then follow the procedure. Both themes have the same process.

Rank Math SEO plugin

What to do if you are using Rank Math SEO plugin? First of all, you need to find Rank Math’s General Settings, then Breadcrumbs, and enable it.

As you can see in the images below, you need to follow the same steps, Rank Math > General Settings > Breadcrumbs. When you enable the breadcrumbs features, you need to add some code to your WordPress theme function.

<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>

You can also add the shortcode.’rank_math_breadcrumb‘ in your WordPress Pages or Post for showing the breadcrumbs, but I recommend adding the PHP code.

Rank Math SEO’s Settings:

In your WordPress dashboard, you need to click on Rank Math then click on General Settings.

Rank Math SEO’s Breadcrumbs:

When you click on General Settings, a new page will be opened, as shown in the image below. Now click on Breadcrumbs and enable the feature.

As you can see in the image, a line of PHP code, you need to copy that and follow the next step.

Rank Math SEO’s Code Implementation in Theme Function:

After copying the code, it needs to be pasted on the singe.php file. You can find the single.php file, and you need to go to the WordPress dashboard then Appearance > Theme Editor > single.php.

The code paste before the content, so as you can see in the image below, the code should be pasted after get header (); ?>.

Yoast SEO plugin

Rank Math SEO’s and Yoast SEO’s method are very similar, the only difference in the code. So first of all, you need to go WordPress dashboard and click on Yoast SEO > Search Appearance > Breadcrumbs and enable the feature. As we have seen in the Rank Math SEO’s method, you need to paste this code in the theme’s single.php file.

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

You need to paste these lines of code on the single.php file.

Yoast SEO’s Search Appearance:

Yoast SEO’s Code Implementation in Theme Function:

Adding Breadcrumbs Using Breadcrumb NavXT

If you don’t want to edit your themes or don’t want to mess with codes, you should install a free plugin named Breadcrumb NavXT.

Install this plugin and activate it, and the breadcrumbs will automatically show after you can customize as you want.

Adding Breadcrumbs Using Custom Hooks

Some WordPress themes have custom hook features so, if you want to enable breadcrumbs using that custom hooks feature, you can do.

This article will use GeneratePress Custom Hooks, and it is effortless to use. If you have a GeneratePress Premium theme, you can easily enable breadcrumbs.

Adding Custom hook Using GeneratePress Theme

Adding custom hooks going Appearance > Elements > Add Elements > Hook .

Inserting Code

Insert the breadcrumbs PHP code and tick on Execute PHP and select the Hook position generate_after_header.

Adding Display Rules

After inserting PHP code, add Display Rules, so you should choose Location > Post > All Post. Now click on publish for breadcrumbs.

FAQs About Breadcrumbs

Conclusion

Adding breadcrumbs to your WordPress website is very useful for user experience, although it is not very important in Search Engine Optimization (SEO). I recommend using breadcrumbs because it helps visitors navigate your website very quickly.

If you want to add breadcrumbs to your WordPress website, you can follow one of the methods I explained above.

Better is if you use Astra Pro or the GeneratePress premium theme, then you can customize far beyond. You can customize with custom CSS.

Guys, that’s it. If you have any problems with adding breadcrumbs on your website, you can ping in the comment box or join our Facebook Groups, and I will be happy to help you.