Hello,
Thank you for contacting Rank Math and bringing your concern to our attention.
Yes, you need to paste the code to your theme’s template files to display breadcrumbs on your website. But before you paste it into your website, you’ve to enable and configure Breadcrumb settings first:
https://rankmath.com/kb/breadcrumbs/#activate-breadcrumbs
Then, you can add Rank Math’s breadcrumbs to your theme’s header.php or single.php file. Here’s a guide you can follow as well:
https://rankmath.com/kb/breadcrumbs/#add-breadcrumbs-theme
I hope that helps.
Thank you.
Thank you for your answer,
In your guide the code is supposed to be attached only on child’s theme’ s files.
Actually in my theme’s files I find “single.php” / “header.php” files on main theme (GeneratePress), while on child theme (GeneratePress Child) I only see a “functions.php” file. Shall I attach the code on “single.php” file inside the main theme GeneratePress, am I correct?
Hello,
Glad that helped.
You can always add your code to your main theme. However, it is not recommended to add any code to the main theme’s files as it might cause adverse effects if not handled correctly.
Also, if you make changes in the original theme file, you run a high risk of losing them after updates (crucial to maintain security) which is yet another reason to use a child theme to implement any changes to your theme’s files.
In this case, you can copy the single.php or header.php file to your child theme’s directory, then add the Rank Math breadcrumbs code there.
Moreover, you can get in touch with your theme developer if there are any additional step/s to use the files in your child theme.
I hope that helps.
Thank you.
Hello,
I’ve also wanted to add that you can use this code to your child theme’s functions.php file to add the breadcrumbs code on your site:
add_action( 'generate_after_header', function() {
if ( function_exists('rank_math_the_breadcrumbs') ) {
rank_math_the_breadcrumbs( '<div class="grid-container grid-parent"><p id="breadcrumbs">','</p></div>' );
}
} );
For modifying the breadcrumbs’ appearance, you can use this CSS selector as well: .rank-math-breadcrumb {}
I hope that helps.
Thank you.
