WordPress Plugin: Breadcrumb NavXT

This article is for the installation and usage of the Breadcrumb NavXT Plugin. This Plugin enables the user to see a “Breadcrumb”, or trail of pages visited, as they navigate your site.

This would be useful if there were a lot of pages or other navigation on your site. The user could go right back to a certain place instead of aimlessly using the back button.

Installing The Plugin

You will need to install this Plugin before you can use it. Follow the instructions below.

  1. Download the file.
  2. Extract the zip file into your WordPress plugins folder.
  3. Enable the plugin at wp-admin/plugins.
  4. Modify your Theme to include the code where you want the breadcrumb to appear.

Theme Modification

Some code will need to be copied and pasted into your Theme in order for the breadcrumb to show on your site.

  • In Appearance > Editor, Select your Theme for editing.
  • Locate “Header.php”, and find the header area, typically found in between <header>, and </header>
  • Copy the following block of code:
<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>
  • Paste the code into your <header>, where you would like it to show on your site. I wanted mine directly underneath the menu.
code to be added to header.php for breadcrumb
Code added into header.
  • Update the file.
  • Refresh your page on the front end, and navigate through some pages on your site.

You should see below the Menu, that there is now a breadcrumb of where you have travelled on your site.
breadcrumb shown underneath the menu

Conclusion

Breadcrumbs aren’t the best choice for just anyones site. Most users can navigate the site themselves using either the Menu, or the back button on their browser. But if you happen to have deep navigation within your site that may be hard to navigate out of, or if your site requires navigation back to specific pages you’ve already visited, Breadcrumb NavXT will work great!

For more information:

Leave a comment