This tutorial provides the steps to display breadcrumbs in Oxygen using the Breadcrumb NavXT plugin.

Step 1

Install and activate Breadcrumb NavXT.

Step 2

Edit your main sitewide Oxygen template.

Add a Section in which you want to show the breadcrumbs.

Give the Section a class of say, breadcrumbs-section.

Style it to your liking. In my test site, I set a Background Color of rgba(0,0,0,0.05) and Font size of 14px.

Add a Code Block inside it having the following PHP & HTML:

<?php if ( function_exists( 'bcn_display' ) && ! is_front_page() ) { ?>
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    You are here: <?php bcn_display(); ?>
</div>
<?php } ?>

The above assumes that you do not want the breadcrumbs to appear up on the site’s homepage.

The reason for not using the plugin’s widget is that currently, it does not work properly with Oxygen in that the order of breadcrumbs gets reversed on the frontend. Details.

Step 3

Add this CSS either in the template for your site’s homepage (if you have one) or globally (in the Customizer or Oxygen’s Manage > Stylesheets):

.home .breadcrumbs-section {
    display: none;
}

You may want to temporarily remove/comment out this CSS code if/when you want to make changes to the .breadcrumbs-section visually in the Oxygen editor.

That’s it!

Reference: https://mtekk.us/archives/guides/calling-the-breadcrumb-trail/

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • Great tutorial Sridhar!

    Is there a way to only have it show the parent page and sub pages. I only want to show the breadcrumbs on the ‘documentation’ and sub pages below it and not have it show the homepage.

    • In the plugin’s settings uncheck Home Breadcrumb so “Home” does not appear in the breadcrumb trail.

      You can create a Template that inherits from your “Pages” or “Main” Template (i.e., whatever currently applies to the static Pages) and add the Code Block inside it. Then apply this Template to the specific parent page and its sub pages.

      It is also possible programmatically to add an if condition for the PHP in Code Block to execute and specify that it take effect on a parent page and its sub pages.

  • >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: