How to Add Breadcrumbs to Any WordPress Website

When it comes to the word “breadcrumbs”, it’s hard not to think of Hansel and Gretel but then again, when it comes to WordPress, these metaphorical breadcrumbs are supposed to do exactly that. They are supposed to help your users to navigate from one section of your website to the home page with ease.

With these ‘breadcrumbs’, your users should be able to backtrack their way to the homepage with ease, and without facing any hassle.

Here are a few things that you may need to do to ensure that you are able to use “breadcrumbs” anywhere on your WordPress site. Just follow the step by step directions and that should help you to embed the breadcrumbs, right where you want them.

1. Install and activate Yoast plugin for your SEO:

The first thing that you need to do is to grab Yoast plugin for your website, if you have not done so already. Yoast is an essential plugin that can help optimize your website so that it ranks better and should help you get better rankings.

More importantly, it can analyze your content to find out what is missing and can help point it out as well. And nope, you do not have to pay for the same as it is free of cost so you should be able to use the same on your site, and not have to pay a penny in the process.

Check here how to install Yoast SEO plugin.

2. Enable breadcrumbs in Yoast SEO settings:

Just head over to your Yoast settings page, you should come across a sidebar with SEO. This is the one that you need to hover above and when you do, you should see an option for “advanced”, click on it.

This should take you to a screen with three tabs, the first of which says “Breadcrumbs”, here you need to click on “enable Breadcrumbs”. After which, you can edit any other part of the settings as you see fit and customize it. Now, click save changes and the same would be saved on Yoast SEO.

3. Grab the code:

It goes without saying that after enabling bread crumbs in your Yoast, you would now have to grab the code in order to be able to place the breadcrumbs anywhere on your site. You can head back to the breadcrumbs setting page on your Yoast, you should see a link to a knowledgebase at the bottom.

Click on it and you should be able to locate the PHP code for your breadcrumbs. Either way, here it is, reposted for your convenience.

if ( function_exists( 'yoast_breadcrumb' ) ) {
yoast_breadcrumb();
}

This is the code that you would enter into your WordPress theme files to display your breadcrumbs for your users.

4. Location:

Decide where you would like your breadcrumbs to go; there are three places that you can opt for – either below the header, before the page/ post content or right after the page/post content and before the footer.

It should be posted at a location that’s fairly easy to find. You can also add breadcrumbs code to a text widget and place it on the sidebar, though the three listed above are some of the popular choices for many online.

5. Place the code in the theme files:

Now that you have decided to place the code and the location where you would like to place the same, all that’s left is to do the deed itself.

Go over to the backend, use your FTP, and locate the wp-content/themes (the theme that you have selected). Now, open header.php so that you can edit the same, but please take care when you do so that you do not break anything.

One of the places that you can place this code is right after the sub heading element in the theme. It may take you a few tries before you get it right.

Once you are done, save the file and refresh and see if the breadcrumbs show up just where you want them to. This is the code snippet that you need to include in the header file to get the breadcrumb to show up.

if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('
<p id="breadcrumbs">','</p>
');
}

Now head to the root directory of your WordPress site, and locate the wp-content folder, check for footer.php file. Now, download the file in question and save the same to your computer. Now, open the file with the help of a text editor and edit it to include the code,

if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('
<p id="breadcrumbs">','</p>
');
}

As far as the footer file goes, placing the text around the copyright text usually works like a charm so you may want to try placing the code in the same position. Once you have added the code, upload the file using FTP and refresh. Check to see if the breadcrumbs show up in the right place.

Adding breadcrumbs to any part of your WordPress is fairly easy; all that you have to do is to copy the code and past the same to the file and it should show up in the desired location as planned.

But when it comes to adding the code to your text widget the process varies slightly. The problem is that WordPress text widget does not parse php which can make it tricky to post the code in the text widget box and expect breadcrumbs to show up.

The one way that you can get around this issue, is to utilize a plugin called advanced text widget. You can download and install it from your backend and activate the same on your website.

Now, head over to the widget’s section of the WordPress, find and locate the sidebar that you would want the breadcrumbs to show up and add advanced text widget. Now, all that’s left for you to do is to add the code to the advanced text widget and wait for the breadcrumbs to show up.

But there is one more issue that you need to sort out, while advanced text widget can parse PHP, it cannot recognize php on its own so you would need to add at the end.

This should help you set up breadcrumbs on your website and at the desired location. However, if you are still wondering why breadcrumbs are important and whether they are essential, then you definitely need to read on. The long and short of the whole argument is that breadcrumbs are all the more essential today than ever before.

Given the spate of online competition, you need to offer your users something ‘extra’ to make them feel valued and breadcrumbs managed to do just that and seamlessly. With breadcrumbs posted all over your website, your users should not face any issue in navigating your website and all the other pages.

The issue is that even if a website features five level drop down menus, it can at times, get a bit confusing which is where the breadcrumbs come in as they provide a valuable and essential service and help your users navigate your website with ease.

Granted, that you may think that unless your website is really huge it does not make much sense to have breadcrumbs on your website, right? Nope, the more users feel valued, the more they would recommend your website to others and this should help increase the traffic on your website.

And with more customers dropping in, your conversion rate should also shoot up as well as your SEO rankings. Keep in mind that your website should still showcase outstanding content and stand out for all the right reasons for any of the above to work like a charm.

The other reason why breadcrumbs are essential is that they enable a customer to backtrack; a customer may want to head back to an earlier page that caught their interest but is not sure on how to go about it. With breadcrumbs, online users can backtrack and even head back to an earlier page without hassle.

The current navigational menu does not permit you to backtrack but with breadcrumbs, you should be able to do just that. It should also help with internal linking and enable search engines to index your website much faster. This should naturally result in improved SEO rankings as well.

This is why breadcrumbs are more essential these days as they offer something of value to your customers. Just one more thing, you may want to do a complete backup of all your WordPress core files before you implement any of the changes, just to be on the safe side.

Related Post: How to Remove Breadcrumbs In WordPress?