How I can add breadcrumbs in my blog?

Hi there,

they provide this PHP snippet:

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

You can add it to the site using a hook element:

https://docs.generatepress.com/article/hooks-element-overview/

Hey, David!

I have added it but it isn't working, see here https://prnt.sc/rhry6b

You need to enable to Execute PHP in the hook element, and make sure to set the Display Rules to Posts > All Posts ( or wherever you need it ).

I have enabled the Execute PHP and set the display rule to all posts as you said.

But it is still not working.

After the Breadcrumb code add:

<span>I am a test</span>

If you do not see I am a test this on the Post then you need to check:

1. The Hook being used is correct - see visual guide of hooks here:
https://docs.generatepress.com/article/hooks-visual-guide/

2. The Display Rules are correct eg. Posts > All Posts

If you do see the I am a test then we know the hook is working.
Which means the Rank Math function is not. As the first part of the function is checking that it exists - then its absence would be related to the Plugin settings.

Hey, David!

I have tried adding "I am a text" and I can see it on the post.

Please help me.

I think RankMath Code isn't working

The issue will be related to the RankMath plugin or most likely how it is set up - are they enabled ?

https://rankmath.com/kb/general-settings/#bread-crumbs

If it is then you would need to look at the other settings or speak with RankMath support.

I am really sorry...

It was not enabled... Now it is working fine.

Can you share some CSS for styling the Breadcump section?

Like this one, https://prnt.sc/rlcbc2.

And also, It is talking two lines to show on mobile. But I want to show it a single line.

Thanks,
Ravi Dixit

Can you disable your caching plugin first?

Why do I need to disable the cache plugin?

So I can see what's been added by you already or it's coming from the plugin itself.

Can you share the CSS for making breadcrumbs like this... https://prnt.sc/rlcbc2

Did you add this CSS or it's coming from the plugin?

.rank-math-breadcrumb {
    background-color: #E4E2DD;
    padding-top: 5px;
    padding-bottom: px;
    padding-left: 10px;
}

No, I added it myself.