How To Show Breadcrumbs On Your WordPress Website.

What is Breadcrumbs?

Breadcrumbs is mainly a navigation tool, which navigates the user’s present location path on a website. WordPress is giving us a huge opportunity to make such kind of beautiful and large website without no extra headaches. Not only does this have to be a WordPress website, but you also need to ensure that it provides full benefits to users. Suppose, you have a website with a huge number of pages. It may be quite difficult for a user to remember a page containing his previous usages. That’s why you need to use Breadcrumbs navigation to make your user’s experience satisfy. In terms of usability, breadcrumbs bring to the number of actions a website visitor needs to take in order to get to a higher-level page, they improve the findability of website sections and pages. Today I’m going to share with you how to show Breadcrumbs on your WordPress Website. 

Live: How to show Breadcrumbs on your WordPress website

So don’t waste time, let’s know how to show Breadcrumbs on your WordPress website. I’m going through a period of time so you can better understand the whole process. 

Step 1: First of all, I’m using the Yoast SEO plugin by Team Yoast. So, you have to install the Yoast SEO plugin. To install it go to WordPress Dashboard >> Plugin >>Add New, Search for Yoast SEO. Now, install and activate the plugin.

Editing Theme

Step 2: Now you have to access the Activated theme folder to edit some elements. To do that, Go to the Appearance then click on Theme Editor. Then select the theme which you want to edit (if you use a couple of themes). Now you have to find out the Header.php file from Theme Files. It’s called Theme Header. Notice that it’s not preferable to edit on WordPress Code editor, because it may occur the other function disturbed. So I suggest using Additional Code Editor. If you have access to the FTP OR panel you can edit with it. It’ll not harm to your main theme files.

Step 3: I’m going to edit the Theme Header(header.php) with an additional editor. I prefer to use the VS code editor or Sublime Text editor. Open the theme folder, it will be where you installed WordPress on your PC. Open it with any code editor which you prefer. Then go as my direction and open the wp-content folder, then Themes folder, after that open the theme, which is currently active, then select the header.php file. 

Editing the theme file:

Step 4: To show Breadcrumbs on your WordPress website, chose a preferable section or place, there will be the Breadcrumbs show. I’m doing it on the .header-inner section which is default class. Now we’re going to write some codes, don’t worry I am providing you these codes.
To add the additional codes go to your WordPress Dashboard, then go to APPEARANCE, then click on CUSTOMIZE, then select the Additional CSS button. Now Paste the codes which I’ve given. 

Step 5: Now you have to enable the YOAST SEO feature. To do that go to your WordPress Dashboard, Now click on SEO, then select Search Appearance. Now click on Breadcrumbs. Then click on the ENABLE button of enable Breadcrumbs setting. After clicking the Enable button then click on the SAVE CHANGES button to save this. 

ADDING SHORTCODE

Step 6: Now I’m going to secure the codes. If somehow you deactivate the Yoast SEO plugin it’ll show the error! I’ve made a SHORTCODE for this, you can add or use the SHORTCODE with the services as anywhere you want. To use the shortcode, copy it and go to the theme folder at the editor, Now open the function.php file. Paste the codes at the end of the file then copy only the SHORTCODE. You can show breadcrumbs using the shortcode anywhere on your site. As I decided to show on the header and I don’t have any input fields for that’s why I will add that on the header.php.

Paste the shortcode exactly like how I did it. 

// [webextent_breadcrumb_show]
add_shortcode( 'webextent_breadcrumb_show', 'webextent_breadcrumb_show_cb');
function webextent_breadcrumb_show_cb(){
   if ( function_exists('yoast_breadcrumb') ) {
       // if ( is_front_page() ) return;
       //if ( is_home() ) return;
       return yoast_breadcrumb('<div id="breadcrumbs">', '</div>', false );
   }
}

Note: Use exactly how I write. 

Congratulations! You’ve done amazing work! Check the Breadcrumbs working well or not! You can use the Breadcrumbs on any page you want. For a better example, you can simply check the demo on how to show Breadcrumbs on your WordPress Website at our YouTube channel.  If you have any question please comment on it.

Follow Us on Youtube.

Related Blog: How To Transfer Posts and Pages From One WordPress Website To Another.

You can catch us on: 

Facebook: https://facebook.com/webextent.net/ 

Twitter: https://twitter.com/WebExtent 

Instagram: https://www.instagram.com/webextentofficial/ 

Regards. 

Tags: Breadcrumbs SEO wordpress WordPress Breadcrumbs WordPress hacks WordPress issues WordPress SEO wordpress theme WordPress tips Yoast SEO Yoast SEO Breadcrumbs