How to Add Breadcrumbs Anywhere on a WordPress Site
Breadcrumbs are an essential navigation element for any website with multiple sub-levels of organization. They allow your visitors to trace their path from the page they’re currently on back to the homepage of your site through all the levels in between—hence, the reference to breadcrumbs as a supposed means of tracing one’s way back through a dense forest.
Having recently redesigned and moved the iConnect POS website to WordPress, we thought we’d share our method of adding breadcrumbs to our own site. While adding breadcrumbs to a WordPress site is a relatively simple process, getting them to show up exactly where you want them can be a more difficult task. So, here’s a quick step-by-step on how to add breadcrumbs anywhere on a WordPress site with just two plugins and a minimal knowledge of the WordPress file structure.
1. Install and activate the Yoast SEO plugin for WordPress.
If you don’t already have the Yoast SEO plugin running on your WordPress site, you can grab it here or search for Yoast SEO in the Add Plugins screen of WordPress. Yoast SEO is one of the most feature-rich SEO plugins available for WordPress, and adding breadcrumbs to your WordPress site is just one of the many things that Yoast SEO can do. It’s pretty much an essential for any site owner who wants their WordPress site to be optimized for search visibility, and perhaps the best part about the plugin is that it’s free!
2. Enable breadcrumbs in the Yoast SEO settings.
After you install Yoast SEO, you should have an added sidebar menu item simple called “SEO.” In our WordPress backend, this item appears right below the default WordPress “Settings” item in the sidebar. Hover over “SEO” and click “Advanced” in the submenu. You’ll end up at a new screen with three tabs, the first of which says “Breadcrumbs.” Check “Enable Breadcrumbs” and edit any of the other settings that you wish to customize. Most sites will do just fine with the default settings, but some site owners, for instance, might want the breadcrumbs to always display the category taxonomy for blog posts. This would be useful for a very well-organized blog that defines only one category for each blog post, thus showing the user which category the currently viewed post falls in and allowing them to easily navigate back to that category’s archive page with a single click. Once you’ve taken a look at all the settings and customized them to your preferences, click “Save Changes” at the bottom.
3. Grab the breadcrumbs PHP code.
Now that we’ve enabled breadcrumbs in Yoast SEO, we need to grab the code that will allow us to place the breadcrumbs just where we want them in our theme. You may have noticed a link at the bottom of the breadcrumbs settings page that goes to a Yoast knowledgebase article about how to implement breadcrumbs. You can click that link to find the PHP code for the breadcrumbs, or just copy it here:
if ( function_exists( 'yoast_breadcrumb' ) ) {
yoast_breadcrumb();
}
This is the code you will paste into your WordPress theme files to display breadcrumbs.
4. Decide where you want to display breadcrumbs.
This one is totally up to you. Most often, sites will display breadcrumbs in one of three places: just below the header content and before the page/post content (i.e. top banner, logo, and main navigation), right after the page/post content but before the footer, or in the footer itself. You might also consider placing breadcrumbs in a sidebar, which would most likely require adding the breadcrumbs code to a text widget. We will go over how to easily add the code to any sidebar text widget in step 6.
5. Place the code in your WordPress theme file(s).
For this step, you need to know some basics about the WordPress theme structure and PHP. We’ll give you two examples of where you could put the code, which should help you figure out what to do if you decide to put it somewhere else.
-
Example 1: just below the header.
Open your WordPress theme folder in the WordPress backend by going to Appearance » Editor or using an FTP application. If you use FTP, your theme folder will be in wp-content/themes/[your theme name]. Next, open header.php for editing. This is where things get a little tricky. Every theme is different, so you want to try to find a place for the breadcrumbs code that will blend nicely with the theme and not break anything. In this example, we place the code right after the “subheading” element in theme. Usually you’ll want to paste the code somewhere toward the bottom of the header, but it may take a few tries before you get it right.
Once you’re done, save the file and refresh your site to see if they breadcrumbs show up where you want them.
-
Example 2: in the footer.
Follow the steps on opening your WordPress theme folder again, and this time open footer.php for editing. Again, there might be a bit of trial and error before you get it just right, but we find that placing the breadcrumbs somewhere around the copyright text usually works out pretty well.
Once you’ve pasted the code, save the file and refresh your website in your browser.
6. Add breadcrumbs to a text widget in any sidebar.
So, adding breadcrumbs to your WordPress theme files is easy enough: copy the code, open the file, and paste it where you want it. But what if you want to add breadcrumbs to a text widget in a sidebar on your site? You might think you can just copy and paste the code into a text widget, but the problem is that WordPress’s default text widget doesn’t parse PHP code, which will cause the code to appear as plain text on your site. The solution to this problem is simple: a plugin called Advanced Text Widget that you can download here or search for in your WordPress back end. Install and activate the plugin, and then go to the widgets section of WordPress. Find the sidebar you’d like to add your breadcrumbs to and add an “Advanced Text” widget to that sidebar. Then, copy and paste the breadcrumbs PHP code into the main text field. In order for the advanced text widget to parse this code, however, we need to let it know that it is PHP. To do this, simply add the <?php before the code and ?> after the code, so the final result looks like this:
You’ll notice that I also placed the code in a <p> tag and called a CSS class. This is useful for styling the breadcrumbs to match the rest of your site. Using CSS, you can align the text, change the font size or family, and much more. For instance, if you check out our iPad POS page, you’ll see that the breadcrumbs show in the footer (which is actually a sidebar containing an advanced text widget) centered (which is what the class “t_align_c” is for).
That’s about it. Using the Yoast SEO plugin and the Advanced Text Widget plugin you now can add breadcrumbs to WordPress anywhere you’d like!