WordPress tutorials

BreadCrumb Navigation, The Benefits and How to Include it in Your WordPress Site

Navigating a website can be a maze like ordeal, especially if you’re not sure where you are and how to return to the starting point. Breadcrumbs or breadcrumb trails are navigational aids that allow visitors to understand their current location on a website. Breadcrumb navigation is a term which makes guidance much easier. If you could take a second to revisit your childhood days, I am sure that you will remember one occasion where you heard the story of Hansel & Gretel. The concept of breadcrumb navigation is quite similar since it’s supposed to help you find your way back. The difference is there won’t be any hungry birds waiting to devour the crumbs once you implement this feature so navigation is foolproof.

Breadcrumb navigation has several benefits as well so both the user and your website will benefit from the installation of any plugin which offers this feature. This isn’t new to you because you have used this on websites many times before. If you observe the highlighted section of the image you will notice a trail in terms of which pages of the site have been visited and how we arrived at this present location:

breadcrumb navigaton example

Benefits of Using Breadcrumb Navigation in WordPress

• Usability is improved since users can always have an idea of their current location. It is much easier to browse in this manner. A website that is comprised of many layers is simple to navigate with breadcrumbs.
• This feature does add a semblance of attractiveness to your website. It displays a concise means or representation of the navigational element.
• It is easy to relate to your current location and the rest of the website once breadcrumb navigation is implemented on a website.
• Google, the giant among search engines will take note of your breadcrumbs and add them to the search results page. Breadcrumb navigation therefore adds a little boost in terms of Search Engine Optimization (SEO).

How to Implement Breadcrumb Navigation

In order to include dynamic breadcrumb navigation on all pertinent web pages, you need to install a plugin. Now, I am sure there are dozens, maybe even hundreds of plugins which offer this feature. However, WordPress SEO by Yoast is the one that we are going to recommend. It has SEO related features to guide you when creating content and uploading media files such as images. This plugin also offers breadcrumb navigation my opinion this plugin is by far the best total SEO solution for WordPress and should take pride of place on your blog.

You can enable breadcrumbs by navigating to SEO and then Internal Links from the sidebar. Your sidebar is located in your WordPress dashboard. You need to check the box to enable breadcrumbs and edit the additional settings if you wish:

yoast breadcrumb navigation enable

In order to activate breadcrumbs you need to insert a tiny snippet of code into the right PHP file within your theme directory. PHP may sound a bit scary but no need to worry. If you do get a bit hesitant, hold on to the fact that you are going through a tutorial to add a feature that’s named after baked goods. Now, that the fear has subsided, we can continue to the next step which is deciding which page you want the breadcrumb trail to be displayed on.

Go ahead and download and install the What the File plugin. Navigate to any blog post page on your site and you will notice that this plugin has popped up on your little toolbar. Hover over it and you’ll be told what PHP file is being used to serve up the body of content on that page. The blog post page will almost always be single.php. It is always a safe bet to double check though. Better safe than sorry! Your screen should look similar to this:

which php file-edit

Now it’s time to retrieve the code you’re going to need to paste in the PHP file. This piece of code is going to ensure that breadcrumb navigation is displayed on your page if its activated. The code will be visible at the bottom of the Internal Links settings page you accessed previously:

php code to enter into file

The next stop is simply pasting the code in your PHP file. You can access the file via FTP which means you will need to go to your dashboard of your hosting provider’s site. Once you have FTP access to your site navigate to “/wp-content/themes/your-theme-name/”. You’ll discover all of the PHP files relative to your theme within that directory.

You should never edit any code on WordPress because once broken, the theme probably won’t recover. Also, when a theme is updated all your changes will be lost if you edit the code in the theme. The best way to go forward is through the creation of a WordPress child theme. Here are two plugins which will assist with this procedure if you are not familiar with it. Basically, these plugins will create the child theme for you so that you can edit the CSS and other files without hurting the original or parent theme:

Child Theme Configurator

child theme config plugin

One-Click Child Theme

one click child theme plugin

Once your child theme is up and running, go to the relevant PHP file, insert the code in the location that you would like the breadcrumbs to appear on your site. After this you can go ahead and re-upload the file to your server. Well its this simple when you want to add breadcrumb navigation to your site.