Breadcrumbs 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!
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.
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
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:
- Download the plugin from here;
- Unzip the plugin and upload the
instant-breadcrumbsdirectory to your
- Activate the plugin through the ‘Plugins’ menu in WordPress;
- Optionally! Change settings values in the ‘Breadcrumbs’ settings page, added under your ‘Appearance’ admin menu;
- Very optionally! Add custom CSS if you need more styling to your breadcrumbs. For many sites, the existing navigation styling works great.
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-crumbto any breadcrumbs;
ib-lastcrumbto the last link in the breadcrumb trail representing the current page;
ib-addedfor new menu items created by the plugin;
ib-editedto 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.
- The exact same blog in TwentyTwelve, no theme editing…
- … and in TwentyThirteen, again without theme editing.
- The same page in TwentyFourteen on a smaller display, showing the breadcrumb trail automatically styles with the navigation menu.
- The breadcrumb trail for a page that already appears in the nav menu, reusing the existing link.
Of course, the plugin is already installed on this blog, so feel free to take a look around and see it in action.
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)