How I can add breadcrumbs in my blog?

[Ravi Dixit]

Hello, GeneratePress team!

I am using RankMath SEO and want to add the breadcrumbs on my blog.

I have read many posts and topics but couldn’t find any good solution.

Please help me in adding breadcrumbs.

[David]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ravi Dixit]

Hey, David!

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

[David]

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 ).

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ravi Dixit]

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

But it is still not working.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ravi Dixit]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ravi Dixit]

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

[Leo]

Can you disable your caching plugin first?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ravi Dixit]

Why do I need to disable the cache plugin?

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ravi Dixit]

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

[Leo]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ravi Dixit]

No, I added it myself.

[Author]

Posts