ThemeGrill AuthorWondering how to add breadcrumbs in WordPress? If yes, you’re in the right place. In this article, we’ll give you clear ideas on how to enable breadcrumbs in WordPress.
Whenever we’re navigating through any website, you reach different sections. It’s natural to get confused about your whereabouts without proper navigation indicators.
Also, you might want to navigate back and forth while searching for some content. This case mostly happens in eCommerce sites as you keep on looking at different products under various sections.
And adding breadcrumbs will easily solve these problems. If you want to know how to add breadcrumbs in WordPress, stick with us till the end. But before that, let’s start with its definition and importance.
What Are BreadCrumbs in WordPress?
Remember the breadcrumbs in the story of Hansel and Gretel? The kids used them to find their way back home. The breadcrumbs in WordPress websites serve the same purpose.
In simple words, Breadcrumbs are simply the links that appear on the top of any page or post pointing out your current location. They’re placed on websites for navigation purposes. They show the categories of the content you’re viewing and help you go back to previous pages.
The position of the breadcrumb on your site will depend on the theme you’re using. By default, the theme might place it in different places.
For instance, in Spacious, you’ll see the breadcrumb on the top right side. You can see the small text path: Spacious > Layout > Sidebar.
Each of the links directs to its respective content area. Naturally, this helps for easy navigation with a single click. With this option, you can say goodbye to using the back button, menu or the search option.
Why Add Breadcrumbs to Your WordPress Website?
As discussed already, the primary purpose of using breadcrumbs on any WordPress website is for navigation. They clearly tell the users where they are on the site.
This systematic structure also appears in Google search results. In such a case, if the structure is proper, users will get a clear overview of the page right from the search results. This also helps to rank your site better.
Even within the website itself, the breadcrumbs enhance user experience by eliminating the hassle of clicking the back button again and again.
As a whole, it also helps to lower bounce rates and elevates organic search. This also helps to generate leads in the long run.
Thus, having breadcrumbs in WordPress sites has multiple benefits. From boosting SEO to user experience, it will enhance your conversion rate and generate dependable leads.
With that being said, it’s time to discuss how to add breadcrumbs in WordPress.
How to Add Breadcrumbs in WordPress?
In this article, we’ll be discussing four different methods by which you can add breadcrumbs in WordPress. You can choose any one among them based on your preference. Now, let’s get started without further ado.
Method 1: By Using Yoast SEO Plugin
One of the easiest methods to add breadcrumbs is by using SEO plugins like Yoast SEO, Rank Math, All in One SEO, SEO Press, etc. Here, we’ll be using Yoast SEO plugin along with a theme compatible with it, i.e. our ColorMag theme. Remember that the theme you choose must be compatible with the SEO plugin you’re using.
i) Install and Activate ColorMag
For this method, we’re using ColorMag Pro because it offers additional features for enabling breadcrumbs. However, you can use the free version too. The process will be similar.
So, to get ColorMag Pro, you need to purchase the theme first from the offical ColorMag page on ThemeGrill. Once you set up your account, you’ll be able to download the colormag-pro-latest.zip file from your dashboard. After the download is complete, you need to install and activate it.
To do that, navigate to your WordPress dashboard. Then, open Appearance >> Themes >> Add New.
There, click on the Upload Theme option and upload the downloaded zip file.
Click on the Install option. After the installation, don’t forget to Activate the theme.
ii) Install and Activate Yoast SEO Plugin
Yoast SEO is a popular plugin that helps WordPress websites to improve their SEO ranking. Additionally, it includes built-in breadcrumbs support to boost your site’s visibility further.
Since it comes with all the necessary elements beforehand, you just have to turn on breadcrumbs and configure them as per your site’s needs.
Before all this, you’ll need to install and activate the plugin. For that, go to Plugin >> Add New.
Search for Yoast SEO in the bar on the top right.
Once the plugin appears in the search results, click Install Now. Do hit the Activate button afterward. And you’re all done!
iii) Add Small Code Snippet for Breadcrumbs provided by Yoast SEO
Now, the next part is to insert a small code snippet for breadcrumbs into your theme. You can add the code anywhere you want the breadcrumbs to appear. You’ll have to have the following piece of code.
<?php
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘</p><p id=”breadcrumbs”>’,'</p><p>’ );
}
?>
You can either place the code in the single.php or header.php template files.
For the first option, place it just above the title of the page for the single.php file. This is useful for adding breadcrumbs to your blog posts.
Likewise, if you want to add breadcrumbs to your entire site, use the header.php file.
After placing the snippets, don’t forget to hit the Update File button to implement the changes.
Note: This method will implement Yoast SEO breadcrumbs all over your site. However, it might not be permanent as the codes you placed may be overwritten with future updates. You can contact theme support and get a permanent solution from the developer if this problem arises.
iv) Enable & Configure Breadcrumbs via Yoast Plugin
Now that you’ve added the code, it’s time to enable the breadcrumbs and configure the advanced settings.
For that, head on to the SEO option in your sidebar. There, navigate to Search Appearance >> Breadcrumbs.
Toggle the breadcrumb setting to Enabled for turning it on.
Once that’s done, you’ll be able configure the settings as per your preference. You can change the structure and other aspects like breadcrumbs separator, anchor text, prefixes, taxonomy for posts/products, content type archive, and more.
After you make the necessary changes, click ‘Save Changes’. If necessary, you can preview your site to verify the results as well.
Method 2: By Using Breadcrumb NavXT Plugin
Sometimes it might be inconvenient to use SEO plugins for adding breadcrumbs. It’s possible that you’ll need to change those plugins at some point or update them. And this might hamper the breadcrumb navigation you placed before.
That’s why we have an alternative. The second method is to use breadcrumb WordPress plugins like Breadcrumb NavXT, Flexy Breadcrumb, Breadcrumb, etc.
Here, we’ll be using the most popular breadcrumb navigation plugin, i.e., Breadcrumb NavXT.
NavXT generates a locational breadcrumb trail for your WordPress website, especially blogs. Moreover, you can easily customize those trails as per the needs of your running site.
Not to mention, its interface is self-explanatory and beginner-friendly. Also, it features schema markup, which helps to boost SEO.
Thus, weighing all its features, it’s indeed the best plugin to enable breadcrumbs in WordPress.
i) Install and Activate ColorMag
Your website needs to have a theme compatible with NavXT to work well.
Considering that, we’re using Colormag Pro again. This theme not only supports the plugin but also helps to set the Breadcrumb label via Customizer. So, no wonder, choosing this theme would be the best choice.
Hence, you need to install and activate the ColorMag theme. The installation process is similar to the one in method 1. Thus, you can simply refer to that and get ready for the process ahead.
ii) Install and Activate Breadcrumb NavXT Plugin
After setting up the theme, you can now install the plugin. For that, navigate to Plugins >> Add New on the left sidebar of your WordPress dashboard.
Then, search for Breadcrumb NavXT using the bar on your right. When you find the plugin, hit the Install Now button and Activate it afterwards.
Once the activation is done, you can configure the plugin settings. For that, go to the Settings option on your sidebar and click on the Breadcrumb NavXT page.
There, you can customize General settings, Post Types, Taxonomies, and Miscellaneous as needed.
In the General section, you can edit the styling of your breadcrumbs separator, templates for the blog, and main site breadcrumb. You may also choose from options like Link Current Item and Pages Breadcrumb here.
Likewise, you’ll find multiple options in the Post Types section to set breadcrumb links for posts, pages, media, landing page, product, and custom post types. You’ll also see the link templates using the Schema.org markup in their tag.
Plus, you can arrange the hierarchy for the breadcrumb trail in posts and pages. The default setting is Site Title > Category > Post Title. The plugin enables you to later add categories like tags, dates, parent posts, and separator signs.
In the remaining sections, Taxonomies and Miscellaneous, you’ll find the links for Categories, Tags, Products Categories, Author Archives, and Deprecated Title Length. You can also find the guide link for trimming breadcrumb title lengths with CSS.
In addition to this information, one important thing to note is that the default settings work for any website most of the time. So, before you customize anything, be sure about the changes you’re making.
If you have any confusion, you can contact ThemeGrill’s customer support for ColorMag Pro. They have a dedicated team that responds to your queries instantly.
iii) Activate Breadcrumbs from ColorMag’s Settings
ColorMag comes with the built-in option to display breadcrumbs. You just need to tick the checkbox for this option from ColorMag’s settings.
Moreover, it also supports plugins like Breadcrumb NavXT and Yoast SEO.
To get there, navigate to your WordPress dashboard and click on Appearance. Then, go to Customize > Content > Blog/Archive.
Here, you’ll see the Breadcrumb option. You can mark the checkbox, and it’ll display the breadcrumb.
Furthermore, you can choose your own introductory text for the added breadcrumb from the Breadcrumb Label field.
The best part is that you’re able to set all of this while having a live preview on the other side.
Once you’re done, don’t forget to click on the Publish button to make the changes go live.
Adding Breadcrumbs with NavXT using a Widget
Besides everything we’ve discussed so far, NavXT features a built-in WordPress widget as well. Thus, you can use it to show the breadcrumbs in any widget-ready areas like footer, main sidebar, etc.
For this, go to your WordPress dashboard and navigate to Appearance >> Widgets. You’ll find the Breadcrumb NavXT widget under the Available Widgets.
To activate it, click on it or drag it to the widget area you want the breadcrumb trail to appear.
After that, click on the dropdown area for further widget settings. For instance, you’ll find the fields like Title, Text to show before the trail, and Output trail.
Also, there are checkboxes to select options like adding link to the breadcrumbs, reverse the order of the trail, hide the trail on the front page, and ignore caching. After you make the changes, do click on the Save button to wrap things up.
Method 3: By Coding Your Own Breadcrumbs Solution
You can add breadcrumbs to your site manually by coding as well. But, you need to be careful with this process. It’s only recommended for advanced users, developers, and site owners who’re getting constant professional guidance.
To code your own breadcrumbs solution manually, you need an enabled functions.php file. This one helps to write your own code function.
But, before you begin, make sure to learn about microdata. Because they’re the ones that provide highlights to your content and inform search engines what the content is about.
This’ll also help you incorporate Schema.org’s BreadcrumbList into your code. It’ll prove useful to improve your website’s SEO too.
Now, the first step of this whole process is to enable the functions.php file. Then, you’ll need to create a unique breadcrumb function name.
After you add the necessary function, you’ll have to call it in the template file. The location would be where you need the breadcrumbs.
For example, if you want breadcrumbs on your posts, call the function in single.php. Whereas, for breadcrumbs to appear everywhere, go with header.php.
<div class=”breadcrumb”><?php get_breadcrumb(); ?></div>
One of the examples of the code for the breadcrumb on your website will look like above.
Note: Coding the breadcrumbs manually will display the bar on your site. But, to match their design with your site, you need to stylize them. For that, you need to add custom CSS. You can either use the theme’s stylesheet or the Additional CSS option in the WordPress Customizer.
Method 4: Using a WordPress Theme with In-Built Breadcrumbs
This method is probably the easiest option of all but it comes with certain limitations.
What you do here is simply install and activate the themes that can automatically add breadcrumbs to your pages. This way, you don’t have to go through the mess of coding or setting up any plugin. If you’re beginning your journey with a WordPress site or planning to redesign your site with a new theme, this is a desirable choice.
The theme incorporates breadcrumbs within a few setups, thus, saving your time and effort.
Further, there are various options for styling and setting it up in the best way possible. Plus, there are tons of free options available in the WordPress Theme Directory, so you may choose the one you like.
Some of the best WordPress themes with in-built breadcrumbs, which we recommend are:
However, a major drawback of this method is that it might not be the best option for an existing site. That’s because choosing another theme means entirely changing the looks of your site. And it’s not quite feasible for popular websites with a specific site identity amongst their audience and customers.
Wrapping Up
A breadcrumb in WordPress is the path that helps the visitors understand your site’s content structure. This way, they navigate your site better and enjoy a pleasant user experience.
Also, enabling breadcrumbs will reduce bounce rate as your users can easily explore your website and find the content they were looking for. This’ll eventually help your site rank higher in search engines and even increase Click-Through Rates (CTR).
That’s why it’s beneficial to add clean-looking, easy-to-read breadcrumbs to your site.
And in this post, we discussed four different ways for adding breadcrumbs to your WordPress site:
- By Using Yoast SEO Plugin
- By Using Breadcrumb NavXT Plugin
- By Coding Your Own Breadcrumbs Solution
- By Using a WordPress Theme with In-Built Breadcrumbs
Hope this article on how to add breadcrumbs in WordPress is helpful. If you’ve any confusion or query on it, do let us know in the comment section below.
Lastly, go through our blog on how to create an online magazine using ColorMag theme if you’re keen on learning about it.
But don’t stop there! We have a lot more of these WordPress-related articles on our blog. So, go check them out!
