Instant Breadcrumbs for Any WordPress Theme

Hansel and Gretel with Instant BreadcrumbsBreadcrumbs are a handy way to make navigating your blog easier. A breadcrumb trail is simply a list of links showing where the current page is in the blog structure. Readers may easily move up and down your blog to discover related content. But including a breadcrumb trail on your site not only makes it easier for visitors to navigate. It also allows search engines to better explore your blog and include extra information in search results. Many breadcrumb plugins exist, but normally need theme editing or a custom theme that uses the breadcrumb function. Often, there is some further styling to make the breadcrumb trail match the overall ‘look’ of the site. I found this a challenge when trying to add breadcrumbs to the TwentyFourteen theme that ships with WordPress 3.8. I really wanted ‘responsive’ additions that hide under a button when viewed on smaller screens. Since the breadcrumbs are a navigation aid, why not place them in the navigation menu itself? Instant Breadcrumbs adds a breadcrumb trail to your WordPress blog’s primary navigation menu. No theme editing required!

Trail of (gluten-free) bread crumbs.I began work on the Instant Breadcrumbs plugin with precisely that approach. The plugin generates a list of breadcrumbs (links and titles) for the current page, then hooks into WordPress to intercept the primary navigation menu. The plugin inserts the breadcrumb trail at the beginning of the menu. There’s a bit of filtering, so items already in the menu are not added a second time where possible. Finally, the breadcrumb trail includes RDFa markup, readable by search engines. The result not only functions straight out of the box with a large number of themes, but also uses the existing menu style. It is a clean and quick solution.

Instant Breadcrumbs Features

  • Works with both custom primary menus and the default ‘page’ menu generated by WordPress;
  • Produces RDFa breadcrumb trails readable by Google and others for better search results;
  • Supports customization of the breadcrumb titles;
  • Avoids repeated links in the menu where possible;
  • Adds CSS classes for breadcrumbs for optional further styling.

Translations

The plugin will automatically detect the language of your WordPress installation and switch to it if available. I recommend using the WordPress Language plugin for an easy way to switch your language and download up-to-date translations. The Instant Breadcrumbs plugin is currently translated into the following languages:

  • es_ES: Español
  • fr_FR: Français
  • sr_RS: Srpski jezik

Spanish translation provided by Andrew Kurtis of WebHostingHub. Serbian translation provided by Ogi Djuraskovic of FirstSiteGuide.

All other translations courtesy of the continued hard work of the WP-Translations team. This plugin is proud to be a part of the WP-Translations community. If you would like to make translation contributions, please visit the translation dashboard on Transifex.

Installing Instant Breadcrumbs

Instant Breadcrumbs appears in the WordPress Plugin Directory, which means you can search for and install it straight from your WordPress dashboard. If you prefer manual plugin installation, you can use the following method:

  1. Download the plugin from here;
  2. Unzip the plugin and upload the instant-breadcrumbs directory to your /wp-content/plugins/ directory;
  3. Activate the plugin through the ‘Plugins’ menu in WordPress;
  4. Optionally! Change settings values in the ‘Breadcrumbs’ settings page, added under your ‘Appearance’ admin menu;
  5. Very optionally! Add custom CSS if you need more styling to your breadcrumbs. For many sites, the existing navigation styling works great.

Adventurous users may even wish to browse the code or download the current development version for a peek at features coming soon.

Frequently Asked Questions for Instant Breadcrumbs

My home page appears twice in the modified menu?

Instant Breadcrumbs will reuse menu items wherever possible, such as when viewing a page that is already in the top-level menu. However it cannot reuse a menu item link if the generated breadcrumbs are incorrectly ordered. The usual example of this is if the home page already appears in the primary menu. The generated breadcrumb trail must start with the home link. The easiest workaround for this is simply to customize your menu so the home page is not included a second time.

How can I apply custom CSS to the added breadcrumbs?

The Instant Breadcrumbs plugin adds several CSS classes to the HTML it creates or modifies. These classes appear on the li element of any breadcrumbs in the menu:

  • ib-crumb to any breadcrumbs;
  • ib-lastcrumb to the last link in the breadcrumb trail representing the current page;
  • ib-added for new menu items created by the plugin;
  • ib-edited to existing menu items.

These may be styled in your theme’s style.css if, for instance, you want breadcrumb items to be highlighted in a different color.

Instant Breadcrumbs in Action

Here are a few screenshots of Instant Breadcrumbs installed and running with some WordPress default themes.

  • Instant Breadcrumbs on a blog post in TwentyFourteen. Shows the breadcrumb trail for the current post, including the post category. This is without any theme editing.screenshot-1
  • The exact same blog in TwentyTwelve, no theme editing…screenshot-2
  • … and in TwentyThirteen, again without theme editing.screenshot-3
  • The same page in TwentyFourteen on a smaller display, showing the breadcrumb trail automatically styles with the navigation menu.screenshot-4
  • The breadcrumb trail for a page that already appears in the nav menu, reusing the existing link.screenshot-5

Of course, the plugin is already installed on this blog, so feel free to take a look around and see it in action.

What’s Next?

I hope you find the Instant Breadcrumbs plugin useful, and hopefully there is more to come. If you have any suggestions for improvements, would like to add language translations, find any bugs, or just comment, I’d love to hear from you. In particular, I would greatly appreciate ratings and reviews on the WordPress Plugin Directory page for Instant Breadcrumbs. Enjoy the plugin! And, while you’re here, why not leave a comment and a link to your blog showing Instant Breadcrumbs in use on your site? Donations on Flattr are always welcome to help sponsor the continued development and improvement of the plugin.

Hansel and Gretel breadcrumbs image from Dana Tan at Content Might be King but Inbound Links are Queen.
Trail of (gluten-free) bread crumbs image by Kat Selvocki (CC BY-NC-ND 2.0)

flattr this!

9 thoughts on “Instant Breadcrumbs for Any WordPress Theme”

  1. i installed-instant-breadcrumbs in my wordpress. how do i use the breadcrumb on my site? I do not see any help or steps for using the bread crumb on this site ? Can you please help me ?

    1. Thanks for installing the plugin. To use it, just enable the plugin and breadcrumbs should automatically appear in the primary navigation menu in your blog. You can change settings by looking for Breadcrumbs under the Appearance menu. I will be very happy to provide more help or information if you need it either here or in the plugin support forum. Thanks for visiting!

  2. Sorry buddy but you ruined your plugin with this latest update. No longer able to place breadcrumbs in my templates where I want? Automatically adding itself to my menu? Those aren’t breadcrumbs!! Ugh. Now I have to find something else.

    1. On second thought, maybe not? I think your plugin is being incorrectly marked as the update for a different breadcrumb plugin that I just overwrote. Unless you decided to completely change the functionality you had.

    2. Jon, sorry to hear you have had problems with the latest update to the plugin. The “automatic addition to the menu” was the intended functionality of the plugin from the very beginning – although initially that was enabled only for “basic” themes (TwentyXX and so on, such as currently running on this blog). The update did extend this to more themes by looking for navigation menus. If you do not like the automatic functionality, you may disable it in Appearance/Breadcrumbs – just specify a “theme location” of “nowhere” (or any other string that isn’t the name of one of your existing nav menus).

      The “manual” addition of breadcrumbs should still be supported, either by using the widget or inserting a call to instant_breadcrumb(); in your templates, then doing your own CSS. If this isn’t working for you, or you need any more support, I’d be happy to help.

      1. Chris- You answered my question here. I just updated to the newest version and the automatic addition was adding too many items to my top menu and pushing it into a 2nd line. Really looked confusing. All I wanted to use was the Widget, and was working fine.
        So I entered “nowhere” as the theme location as you suggested, and I’m a happy camper again (until another update erases my “nowhere and I have to remember what I did?) Maybe a button somewhere turning this feature on/off would be helpful for those of us only wanting to use the widget.
        But thanks again for your plugin!

        1. Larry, glad to hear the workaround got things back to how you wanted them. It is indeed a workaround – specifying a menu that doesn’t exist – and I agree a checkbox to enable and disable the automatic menu addition would be much better. I’ll definitely go ahead and add that. The theme location setting should persist between plugin upgrades, so no need to worry there.

          The 1.4 release has been quite educational for me. The automatic menu addition was originally the big ticket item for the plugin, but wasn’t working on many themes. Now it’s fixed, it seems to be an unpopular feature; it’s just pure luck there’s a workaround. Thanks so much for the feedback; it will greatly influence the plugin’s future development!

          1. Chris-
            I just installed the latest version 1.4.1 that includes the checkbox to turn off the automatic menu addition. Works great. Thanks so much for your quick attention to this!
            I can see where inserting the breadcrumbs into the menu can be a useful tool. However, in my site, my menu already takes most of the width of the page and there’s no room. It would be neat if the breadcrumbs appeared under the existing menu; maybe insert at the end (right side) of the menu instead of at the beginning (left side) with a or something to force it to a new line.
            But the widget is doing exactly what I need for now and I appreciate the plug in.
            Thanks again!!!

          2. Larry, that’s great news. The checkbox did turn out to be an important addition. I did underestimate how willing people are to edit themes and stylesheets; auto-insertion is a beginners’ option, but it can mess up a well-crafted menu.
            I do like the ideas of some more control over the insertion; that’s something I’ll look into, now the checkbox has bought me some time to think about it :)

Leave a Reply