Add a breadcrumb trail to a WordPress site? Sounds like it was a matter of switching one option. Not in WordPress!

What I realized, adding a breadcrumb required four actions:

1. Install a breadcrumb plugin.
2. Create a child theme if you use a stock theme.
3. Edit theme file to display the breadcrumb in a correct position.
4. Edit theme file to style the theme.

Install a breadcrumb plugin

I have tried two plugins: Breadcrumb and Breadcrumb NavXT.

Breadcrumb

The Breadcrumb plugin seemed to be simpler in use. It automatically displayed the breadcrumb in the page’s header. But the effect was miserable. I was not able to change some options. I was not able to change its theme to plain text. And it displayed “Home > 02” as breadcrumb trail in a blog post. I uninstalled this plugin because fixing it would be probably too complex.

Breadcrumb NavXT

Another plugin is Breadcrumb NavXT and it’s the most popular one. The problem with this one is that it does not render the breadcrumb on the page. I could only add a widget to a sidebar with the breadcrumb, which is not the right location for it.

I learned I can display the breadcrumb by calling a PHP function in my theme. It will be described in the next steps.

In the plugin’s settings I have enabled the home breadcrumb in the trail and changed the name of “home” in the breadcrumb from my site’s name to “Home”:

Create a child theme

This step can be skipped for quick experiments.

A child theme is a theme that inherits from your base stock theme and which enables you to modify it slightly while allowing to maintain the base theme. If you edited directly the stock theme’s files, your changes would be probably overwritten during next upgrade of the theme.

Although the steps to create a child theme are not complicated, they require many more skills than clicking options in WordPress administration pages.

Head to WordPress – I created a child theme, but it looks different because of Bootstrap for more details on how to create a child theme in WordPress.

Edit theme file

In my case it was enough to add a line to Theme Header (header.php):

If that file does not exist in the child theme, it should be copied from the base theme.

Function bcn_display will call Breadcrumb NavXT‘s plugin method to render the breadcrumb.

Style the breadcrumb

Although the breadcrumb should be visible by now, it won’t look good. Adding some margins should be enough to make it decent.

First I have put the breadcrumb in the same container as the rest of the content is in. One option would be to modify several files (post, search, main), the other option is to edit the same Theme Header (header.php) file and write:

This code adds some divs to mimic the contents’ section structure (I copied that from the beginning of Single Page (page.php) file). The first and last lines (if, endif) hide the breadcrumb from the home page.

Result:

• 

• 

I added some margin at the bottom and hid the filters (“Browsed By”) in the theme’s style Stylesheet (style.css) as it was duplicating the breadcrumb:

Lessons learned

Create a child theme immediately for a new site – you will definitely need it to customize the site.

Want more?

• My favorite bookmarklets
• My favorite graphing tool – Graphviz
• How I refactored maze generating Python code and used advanced class features
• Trello – Blogging Editorial Workflow and Calendar
• Course/movie labeling solution using Firebase and ViolentMonkey

Share!