[Resolved] Rankmath breadcrumb code position

[Sundry]

Rankmath asked me to do the following:
Use the following code in your theme template files to display breadcrumbs. Learn More
<?php if (function_exists(‘rank_math_the_breadcrumbs’)) rank_math_the_breadcrumbs(); ?> OR [rank_math_breadcrumb]

According to the guide video: https://youtu.be/30jgc9RXLVo the position is not clear.

Under Theme Editor where am I supposed to put the code? Please help.

[Ying]

Hi there,

It depends on where you want the breadcrumbs to be placed?

Here’s a video from GP on how to add breadcrumbs: https://youtu.be/GkJq5fMwDxs

If you follow this video tutorial, the shortcode is what you are gonna use: [rank_math_breadcrumb].

Let me know if this helps 🙂

[Sundry]

Hello Ying,

I watched the video. On 1:25/4:59 where they are putting element type.

Unfortunately, I have no such option. As you can see in the attachments.

Please guide.

[Elvin]

Hi there,

Under Theme Editor where am I supposed to put the code? Please help.

Do you have a child theme? If so, you can place this code on your child theme’s functions.php.

add_action( 'generate_before_entry_title', function(){
    if ( function_exists('rank_math_the_breadcrumbs') ) {
        rank_math_the_breadcrumbs(); 
    }
});

Alternative to functions.php, you can run this code on your site using a Code Snippets plugin.
https://docs.generatepress.com/article/adding-php/

Unfortunately, I have no such option. As you can see in the attachments.

It’s not showing up because you’re using Classic editor for your site. The demo video is using WordPress’ latest default editor, Gutenberg.

[Sundry]

As per I can see it is not a child theme.

Can you please check and tell me?

Thank you. The breadcrumb is visible now. The size of the font is very big and quite absurd. Can we fix this?

[Elvin]

Try adding this CSS to adjust the font-size.

nav.rank-math-breadcrumb {
    font-size: 14px;
}

You can add this on Appearance > Customize > Additional CSS.

[Sundry]

Thank you very much Elvin. As usual, you nailed it.

Can you please reduce the gap above the breadcrumb?

[David]

Hi there,

the space above the breadcrumb comes from the Customizer > Layout > Container –> Top Padding. You can reduce that there and it will keep the space uniform across the site.

[Sundry]

Thank you.

[David]

You’re welcome

[Author]

Posts