Do not be put off by the unusual name, as breadcrumbs are in fact a very useful tool which significantly improves your site’s user experience and SEO. To enable them can be quite simple with the help of a custom code or a plugin.
In today’s post we will go into details about WordPress breadcrumbs and how exactly they work.
What are WordPress Breadcrumbs?
Breadcrumbs are navigational links which appear at the top of a page or post. They will show visitors the higher-lever categories which led them to the desired content as well as navigate them to previous pages.
Breadcrumbs create a trail which leads the user back home, hence the name. Especially useful for online stores or blogs, users can move between posts, product pages and categories.
How do Breadcrumbs Work?
There are three main types of WordPress breadcrumbs:
- Hierarchy-based: They show users where exactly they are in the site’s structure.
- Attribute-based: Used mainly on ecommerce websites, they display the attributes the users have searched for which led them to the product they are viewing.
- History-based: as users move through different pages, they will be led back the way they came.
Each type of breadcrumbs can be useful for different purposes. All of them, however, can improve navigation and by extension UX.
They are also very beneficial in terms of SEO and will show the relationship between different content of your website which makes it easier for search engines bots to understand the structure of your website.
This helps indexing your website more accurately. Search engines can also display your site’s breadcrumbs in results listing, which in turn provides users with additional information on the topic or product they were looking for.
How to Add WordPress Breadcrumbs to your site?
In just a few simple steps you can add breadcrumbs to your site, no matter if a you are a professional or a WordPress beginner.
Yoast SEO
This is a popular plugin which helps users optimize they content and approximate their search engine ranking. It includes some additional features like boosting your site visibility with breadcrumbs.
The installation can be done through your Dashboard:
In the next step you need to add this code:
<?phpif ( function_exists('yoast_breadcrumb') ) {yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );}?>If you wish to add breadcrumbs to your blog posts, this can be done in your single.php template file.
You can also paste it at the end of your header.php file, which will add breadcrumbs to your whole website.
Please keep in mind that any future theme updates may override the code. In this case it’s best to contact your theme developer for further information on how this can be avoided. Once you place the code, go to SEO – Search Appearance – Breadcrumbs:
Set the setting to Enabled, Save and Post.
WordPress Breadcrumbs plugin
If you are already using Yoast for SEO purposes it can be really convening to add breadcrumbs with it. If you, however, prefer a different plugin which would optimize your content, here are a few useful recommendations:
Breadcrumbs NavXT
This is the most popular choice for adding breadcrumbs to your site. It provides you with a breadcrumb widget which can be added to any widget area, such as footer or toolbar. It’s extremely customizable, and enables you to choose which categories and pages to display in the trail. It also includes schema markup for SEO improvement.
Flexy Breadcrumb
Flexy Breadcrumb is the most highly-rated plugin out there for adding WordPress breadcrumbs. After your download and activate it, you can add breadcrumbs to your website with the help of a shortcode. This gives you more flexibility in terms of where you wish your trail to appear. You can also make changes in color, font size and icons.
WooCommerce Breadcrumb
For all online retailers out there, this is an easy option for users for navigate through your site’s product pages. If you are using the WooCommerce plugin this may well be the best option for you. You can activate breadcrumbs to your product pages which improves customer experience.
Breadcrumb
Breadcrumb is a very lightweight plugin which enables you to add breadcrumbs using shortcodes. It provides you with a code snippet which can be added to one of your template files and incorporated in your footer, header or elsewhere.
Use a Theme with breadcrumbs
The main idea of themes is to control how your site looks, but aside from that they also influence on its functionality. One of the ways this can be done is by adding breadcrumbs to your pages.
On the downside, this process involves changing your site’s appearance. If you already have a high brand awareness and an established presence, it may not be your best option, and It’s better you go with a plugin.
On the other hand, if you are just starting a WordPress site or are making a redesign of your old one, using a theme with incorporated breadcrumbs can be a time-saving decision. You have several free options to choose from:
Ocean WP
This is one of the most popular multipurpose themes. It has an included shortcode for easily applying breadcrumbs to your website.
Astra
Likewise, this theme also makes adding breadcrumbs to your site quite easy.
Adding Breadcrumbs manually
It’s true that themes and plugins are what makes WordPress such a popular choice among users. In some cases, however, they can be a bit limiting. Code provides you with a creative element and gives you the freedom of writing your own breadcrumbs.
To add them manually to your site, you need to follow two steps.
- Add a function to your functions.php file in order to enable them.
- Call in the template file where you wish the breadcrumbs to appear.
Keep in mind that this will only display the breadcrumbs on your site, but it will not style them so they fit with the design. To achieve that, you would need to dip into some CSS as well.
Styling your WordPress Breadcrumbs
If you are the one coding the breadcrumbs, then styling them is absolutely necessary. If you are using a plugin or theme, it can be very useful. They have a default styling which might not be a good match for your site, in which case you need to tweak them a bit.
You can also add a custom CSS in order to style the breadcrumbs in your theme’s stylesheet or in the Additional CSS area.
Changing the size, font and color of the breadcrumbs are one of the many ways to customize them for your site. You can also use elements such as padding, margins, icons and borders.
An example of a CSS which be used to style breadcrumbs can be seen here:
.breadcrumb { padding:8px 15px; margin-bottom: 20px list-style: none; background-color: #f5f5f5; border-radius: 4px;}.breadcrumb a { color: #428bca; text-decoration: none;}The possibilities are endless when it comes to CSS. It may take some time and experimenting until you achieve the desired effect.
Conclusion
Strong SEO and UX are key elements for a successful site. Enabling breadcrumbs to your WordPress website will improve your visitors’ experience and how they navigate through your content, while at the same time improve your pages indexing.
Share with us your experience with breadcrumbs and the way they have improved your online presence.
