Breadcrumbs or breadcrumb trail is a navigation aid used in a Website. It gives users a way to keep track of their locations within the Website. Breadcrumbs typically appear horizontally at the top of a Web page. Breadcrumbs provide a trail for the user to follow back to the starting or entry point.
Breadcrumb trail is an important supplementary element of a Website´s navigation, especially for complex Websites. It improves usability, enhances user experience and it is better for SEO. Don´t take my word for it, Google recommends using Breadcrumbs in their SEO starter guide. Also Google is integrating breadcrumbs navigation within the Search Engine Results Pages.
Breadcrumbs are especially useful for complex Websites containing many pages and sub-pages, and organized into many categories. On the other hand, breadcrumbs for simple Websites are not really necessary.
The picture below shows examples of breadcrumb trails generated from this blog. This blog is using the breadcrumb code shown below, browse the various sections of this blog and see how it behaves.
Yes, there are plugins for WordPress breadcrumbs, such as BreadCrumb NavXT. But haven´t you read my previous post about the disadvantages of going crazy adding plugins to your theme? Also what would you do if you want to develop a theme with a built-in breadcrumb trail.
There is one disadvantage of using breadcrumbs, it increases the number of query requests to your database, and thus a slighter increase in load time. However, this could be neutralized with a caching mechanism implemented to your Website. Again, haven´t you read my previous post about the advantages of caching a dynamic Webiste? I believe that the benefits of breadcrumbs: better user experience, and making the Website friendlier for Search Engines, far outweighs its one disadvantage. Breadcrumb navigation is important for usability and for SEO, especially for complex Websites.
My Breadcrumbs Code: Supported Features
The code below display breadcrumb trail for:
- Single post listed in one category.
- Single post listed in multiple categories that are at the same level.
- Category and sub-category archives.
- Tag archive.
- Yearly archive.
- Monthly archive.
- Daily archive.
- Author archive.
- Search result page.
- Top-level pages (top-level menu).
- Multi-level sub-pages (multi-level sub-menus).
- 404 Not found Error page.
The code below also features:
- Complete or shortened post titles.
- Two custom delimiters. Same level categories use a different delimiter.
Also the code below works in both cases when:
- Your Website´s Front page displays your latest posts.
- Your Website´s Front page displays a static page and your posts are located somewhere else.
To better explain: the default WordPress settings is shown below. If you choose the other option: "Front page displays -> a static page (select below)", the breadcrumb code still works.
My Breadcrumbs Code: NOT Supported Features
The code below does not support:
- Adding a page number at the end of the trail.
- Custom post types.
- Custom taxonomies.
- A single post listed in a top category AND in a subcategory (or subcategories). An unlikely case, where you get a mix up of delimiters.
WordPress Breadcrumbs Function Code
This is my version of the WordPress breadcrumbs code. Open the functions.php file located in your theme´s folder and add (copy and paste) the following function. Sorry for the long code, but I commented it so you understand better what´s going on.
Note: To scroll within the code: You can also click on the code window and use your keyboard´s arrow keys.
After adding the above function in your functions.php file, copy and paste the code below in the header.php file located in your theme´s folder. Place the following code where you want the breadcrumb trail to appear.
The easiest way is to place the above code (CODE-2) in your theme´s header.php file. If you decide otherwise, then you need to place it in multiple files like: single.php, archive.php, search.php, page.php (custom-page.php if you have one) and probably in other files depending on your theme. Did you get the point that adding it to the header.php is simpler?
Styling the Breadcrumbs
Finally we need to style the breadcrumb trail with CSS. The following code is what I used to style the breadcrumb navigation for this blog. The code should be added to your theme´s CSS file (usually called style.css). Of course go ahead and change it to fit your design.
You now have the breadcrumbs code that can be used on any WordPress Website. If you have any questions, or if you have other ideas on how to improve and add more functionality to the code, be sure to leave a comment!