Add Breadcrumbs to WordPress Website


🖊 Written by Updated on

If you are looking for how to add breadcrumbs in the WordPress website, then you are in the right place. Breadcrumbs are just good for the user experience, So if you want to add this feature on 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 inbuilt breadcrumbs feature and you just need to activate the feature. Like the Astra theme, they have an inbuilt feature for breadcrumbs.

Breadcrumbs on astra theme

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

In case if you are not using any kind of theme those do not have the breadcrumbs feature then follow the next methods.

Adding Breadcrumbs Using SEO Plugins

Most of the 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. Just 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 procedure.

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 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 piece of code in your WordPress theme function.

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

You can also add the shortcode

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.

Breadcrumbs Rank math seo

Rank Math SEO’s Breadcrumbs:

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

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

Breadcrumbs rank math seo

Rank Math SEO’s Code Implementation in Theme Function:

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

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

Breadcrumbs rank math seo

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. Now 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:

Breadcrumbs Yoast SEO

Yoast SEO’s Code Implementation in Theme Function:

Breadcrumbs Yoast SEO

Adding Breadcrumbs Using Breadcrumb NavXT

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

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

Breadcrumbs Yoast SEO

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.

In this article, I am going to use GeneratePress Custom Hooks, it is very easy to use. If you have a GeneratePress Premium theme you can enable breadcrumbs very easy.

Adding Custom hook Using GeneratePress Theme

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

GeneratePress Custom Hook

Inserting Code

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

GeneratePress Custom Hook Adding Breadcrumbs code

Adding Display Rules

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

GeneratePress Custom Hook Display rules

FAQs About Breadcrumbs

How to Add Breadcrumbs in WordPress?

Breadcrumb NavXT plugin is great for showing Breadcrumbs on the WordPress website. If you are using Rank Math SEO or Yoast SEO plugin then you also can add breadcrumbs on your WordPress website.

How to add breadcrumbs in WordPress without a plugin?

Adding breadcrumbs in WordPress without any plugins it is tough if your WordPress theme doesn’t support breadcrumbs functionality. If your theme support breadcrumbs like the Astra theme, then you no need any plugin for adding breadcrumbs.

Conclusion

Adding breadcrumbs in your WordPress website is very use full for user experience although it is not very important in terms of Search Engine Optimization (SEO). I personally recommend using breadcrumbs because it helps the visitor to navigate your website very easily.

If you want to add breadcrumbs on your WordPress website you can follow one of the methods which have I explained above in the article.

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, I will happy to help you.

Pronay

Hi!
I am a blogger and a digital marketer based in Delhi, India. I have a passion for blogging and influencing people from my work. I am a student pursuing a Bachelor's Degree in Science from Delhi University.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Share via
Copy link
Powered by Social Snap