In which php file to include breadcrumbs code

#66480
  • Resolved Rak Tamachat
    Rank Math free

    Hello!

    We installed your Rank Math SEO plugin a few weeks ago, and we are very happy with its functionalities.

    We would like to implement breadcrumbs on our site, but it is too big a job to go code the site page by page.

    In your plugin, you mention a possibility of entering a line of code in the theme template files:
    “Use the following code in your theme template files to display breadcrumbs:
    <?php if (function_exists(‘rank_math_the_breadcrumbs’)) rank_math_the_breadcrumbs(); ?>”

    We use Divi, with a child theme. Our child theme (which would be where to insert the code), doesn’t have a file called template.php.

    We have access to header.php, footer.php, functions.php, or style.css.

    Which file do you recommend we use to insert the line of code? Is it even in the Divi Child Theme?

    Thank you for your support!

    Beau Wickboldt

Viewing 8 replies - 1 through 8 (of 8 total)
  • Anonymous
    Rank Math free

    Thank you for contacting Rank Math today.

    You can use Breadcrumbs from Rank Math by going to WordPress Dashboard > Rank Math > General Settings > Breadcrumbs. Simply enable breadcrumbs, change the options as per your preference and save the changes.
    Then, grab the code and paste it in your theme’s single.php and page.php files (ideally)
    If you are unsure about this step, please talk to your theme provider and ask them where the breadcrumbs code should be placed. Even if you use a free theme, the support should be able to help you with the ideal placement of the breadcrumbs code. For your reference, here is the breadcrumbs code used to insert Rank Math’s breadcrumbs:

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

    Hope that helps and please do not hesitate to let us know if you need our assistance with anything else.

    Alberto
    Rank Math business

    Hello,

    To extend the answer of my colleague, you can add the breadcrumbs code in the header.php (if it has content, add it at the end without the <?php nor ?>), so the code would be like this:

    <?php
    .... your header.php content ....
    if (function_exists('rank_math_the_breadcrumbs')){
      rank_math_the_breadcrumbs();
    }
    
    // This last line is optional, you don't need to end the file with ?>
    ?>

    Looking forward to help you.

    Hello guys,

    Thank you for your help, much appreciated.

    I went to my header.php file. and added the line of code you provided me at the end of my file, as follows:
    /**
    * Enables Rank Math Breadcrumbs
    */
    if (function_exists(‘rank_math_the_breadcrumbs’)){
    rank_math_the_breadcrumbs();
    }

    However, it seems to display it halfway covered by the menu bar, as you can see here:
    https://staging.raktamachat.org/permaculture-thailand-asia/permaculture-internship-asia/

    In my header.php file, there is nothing after that added line of code, and just before the added line of code is this (if it helps):

    <?php
    /**
    * Fires after the header, before the main content is output.
    *
    * @since 3.10
    */
    do_action( ‘et_before_main_content’ );

    I hope you can help me solve that issue. Thank you 🙂

    Also, since we added the code in the header. the breadcrumbs line appears on the home page.
    Is there a way for breadcrumbs not to be displayed on the front page?

    This could be a nice add-on to the breadcrumbs settings 😉

    Many thanks

    Alberto
    Rank Math business

    Hello,

    The breadcrumbs being overlapped is due to how your theme works. Luckily, it is really easy to fix it. Just add the following CSS in WordPress Dashboard > Appearance > Customize > Additional CSS:

    nav.rank-math-breadcrumb {
        margin-top: 15px;
        margin-left: 8px;
    }

    About having it displayed everywhere except on the homepage, you can modify the code you previously added with this one:

    if (function_exists('rank_math_the_breadcrumbs') && !is_home()){
      rank_math_the_breadcrumbs();
    }

    Looking forward to help you.

    Hello,

    I have updated the sensitive data as requested. Can you please check further?

    Thank you.

    Hi Alberto,

    Thank you for your help.

    I tried to add the code in the css, however it doesn’t work, even with a padding at 120px…

    Here is what I have in my CSS style sheet regarding the header:

    **RankMath breadcrumbs to be below the top bar**
    nav.rank-math-breadcrumb {
    margin-top: 120px;
    margin-left: 8px;
    }

    .et_fixed_nav #logo {
    max-height: 90px;
    margin-bottom: 11px;
    }
    #main-header {
    background-image: url(https://raktamachat.org/wp-content/images/adobe-header.jpg);
    background-size: auto 100%;
    top: 0;
    padding: 10px 0 0;
    line-height: 0;
    }
    #et-top-navigation {
    padding-bottom: 16px;
    }

    /* Secondary Menu */

    #et-secondary-menu {
    float: none;
    text-align: center;
    }

    .et-fixed-header #logo {
    max-height: 55px!important;
    }
    .et-fixed-header {
    /* height: 92px!important; */
    }

    .et_header_style_centered #logo {
    padding: 0!important;
    }

    #top-menu a {
    font-size: 17px;
    }
    #top-menu li li a {
    line-height: 1em;
    }

    I tried to clear my cache and clean my databases, and still no change, as you can see on that page:
    https://raktamachat.org/permaculture-thailand-asia/permaculture-design-masters-degree-program/

    I just attached snapshots of my header.php file, if you can see something in there that could help you decipher where the problem lies…

    Also, the php added code you gave me doesn’t fix the problem for the front page of our site.
    Our problem is that we can still see the breadcrumb prefix “You are here” on the front page: https://snipboard.io/jvRPi8.jpg

    Thank you for your help, it is highly appreciated!

    Regards

    Beau Wickboldt

    Alberto
    Rank Math business

    Hello,

    I think we might need to take a closer look at the settings. Please edit the first post on this ticket and include your WP logins in the designated Sensitive Data section.
    Sensitive Data Section

    It is completely secure and only our support staff has access to that section. If you want, you can use the below plugin to generate a temporary login URL to your website and share that with us instead:

    https://wordpress.org/plugins/temporary-login-without-password/

    You can use the above plugin in conjunction with the WP Security Audit Log to monitor what changes our staff might make on your website (if any):

    https://wordpress.org/plugins/wp-security-audit-log/

    We really look forward to helping you.

    Hello,

    Since we did not hear back from you for 15 days, we are assuming that you found the solution. We are closing this support ticket.

    If you still need assistance or any other help, please feel free to open a new support ticket, and we will be more than happy to assist.

    Thank you.

Viewing 8 replies - 1 through 8 (of 8 total)

The ticket ‘In which php file to include breadcrumbs code’ is closed to new replies.