Breadcrumb Navigation Menu in Genesis Theme

The one thing website administrators constantly strive for, is to make it easy for the user to navigate through the website. This is important because simple navigation options = improved customer experience = increased amount of time spent on website = profit. The one navigation menu often used on websites to achieve this goal is the breadcrumb navigation.

Although the breadcrumb navigation menu is good feature, the default breadcrumb navigation menu provided by a theme might not always suit your requirements. There is sometimes a need to customize the breadcrumb to display it as per your specifications. Due to my experience with Genesis theme, I am going to elaborate on some methods to customize the Genesis breadcrumb in this post. However before I go on to that I will throw some light on what is a breadcrumb navigation menu and why should it be used on your website.

So what is breadcrumb navigation menu?

A breadcrumb navigation menu highlights a user’s location on the website. It also helps the user navigate through the website by using it. It is mainly used in layered websites where there is a need of tracing the user’s path. Using the breadcrumb navigation a user can go back to a page which is more than one level above using a single click. The image below illustrates an example the breadcrumb navigation menu on the WisdmLabs website which has been developed using the Genesis theme.

 

When does it make sense to use breadcrumbs?

Although breadcrumb navigation is a good feature, it does not necessarily mean that every website must have it.

Breadcrumbs make more sense on websites where there are multiple levels or sections through which the user may need to move back and forth. For example, if your website has categories, sub-categories, product pages, service pages, or custom post types, then breadcrumbs can be quite useful.

On the other hand, if the website is very small and has only a handful of pages, then adding breadcrumbs may not really add much value and can sometimes even feel unnecessary.

So before enabling breadcrumbs, it is always a good idea to look at the structure of the website first.

Why should you use a breadcrumb navigation menu?

1. Improved User Experience

It makes it easy for user to trace their path and view their current location on the website. It also helps the user to go back to a page which is more than one level above with a single click. This greatly improves user experience on your website.

2. Reduced Bounce Rate

Breadcrumb navigation definitely has an effect on the time spent by a user on your website as the user now is provided with links to related content which the user is likely to view. It thereby reduces the website’s bounce rate.

3. Good SEO Feature

Adding breadcrumbs to your website is usually helpful in SEO. It helps the search engine understand the website’s hierarchy and is used by the search engine to index the site. Also the breadcrumb is displayed as links in organic search results just below the page. Hence if keywords are used selectively it can prove beneficial for better rankings.

Now that we are done with done answering the question on why to use breadcrumb navigation menu, let us go on to understanding how to enable and customize breadcrumb navigation menu in the Genesis theme.

How to enable Breadcrumb Navigation in Genesis ?

Before we go on to the customization part, I’ll quickly explain how to enable the breadcrumb navigation menu in the Genesis theme.

• Go to the admin dashboard.
• Click on the ‘Genesis’ option in the left-hand side navigation panel of the admin dashboard.

• Now click on the ‘Theme Settings’ option below the ‘Genesis’ option.
• Once you have clicked on ‘Theme Settings’ the following screen will be displayed on the right hand side.

• Here, under ‘Breadcrumbs’ you can choose the pages that you want to display the breadcrumb menu on.

Various Customizations for the Genesis Breadcrumb

1. Reposition Breadcrumb Navigation Menu

• If you are using ‘ContentSidebar’ layout for your singular post page in Genesis, and enable breadcrumbs for it, it will display the breadcrumbs inside the <main> tag that shows the main content of the post, like in the below image.

• You can move the breadcrumbs above the main content and sidebar, and make it full width, as it is shown in the image below.

• To get the above result, just write the below code in functions.php

<?php
  //* Reposition the breadcrumbs
  remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs');
  add_action( 'genesis_before_content', 'genesis_do_breadcrumbs');
?>

2. Modify Arguments in Breadcrumb Navigation Menu

• The are a host of default arguments provided in the Genesis theme for the breadcrumb navigation. These default arguments can be modified using the following code.

<?php
  //* Modify breadcrumb arguments. 
  add_filter( 'genesis_breadcrumb_args', 'sp_breadcrumb_args' ); 
  function sp_breadcrumb_args( $args ) { 
     $args['home'] = 'Home'; 
     $args['sep'] = ' > '; 
     $args['list_sep'] = ', '; // Genesis 1.5 and later 
     $args['prefix'] = '<div class="breadcrumb">'; 
     $args['suffix'] = '</div>'; 
     $args['heirarchial_attachments'] = true; // Genesis 1.5 and later 
     $args['heirarchial_categories'] = true; // Genesis 1.5 and later 
     $args['display'] = true; 
     $args['labels']['prefix'] = 'You are here: '; 
     $args['labels']['author'] = 'Archives for '; 
     $args['labels']['category'] = 'Archives for '; // Genesis 1.6 and later 
     $args['labels']['tag'] = 'Archives for '; 
     $args['labels']['date'] = 'Archives for '; 
     $args['labels']['search'] = 'Search for '; 
     $args['labels']['tax'] = 'Archives for '; 
     $args['labels']['post_type'] = 'Archives for '; 
     $args['labels']['404'] = 'Not found: '; // Genesis 1.5 and later 
     return $args; 
  } 
?>

• So, for example, by default the genesis theme has the string ‘You are Here’ prefixed before the breadcrumb trail. However, if you notice in the first screenshot that I have provided above, the breadcrumb on our website does not have the string prefixed to the breadcrumb trail. To implement a similar for your website, write the below code in functions.php

<?php
  //* Remove 'You are here' from the front of breadcrumb trail
  add_filter( 'genesis_breadcrumb_args', 'wdm_prefix_breadcrumb' );
  function wdm_prefix_breadcrumb( $args ) {
  $args['labels']['prefix'] ='';
  return $args;
?>

• Similarly, other breadcrumb navigation arguments can also be modified appropriately.

One thing important to note is that while beneficial. breadcrumb navigation should be used a little intelligently. It makes more sense to use a breadcrumb navigation menu in a layered site like an eCommerce website than a website which is merely a blog. This is because the purpose of a layer is to trace the user’s path. And if there aren’t many layers in the website the need to trace the path doesn’t remain and the purpose is defeated.

What if breadcrumb is not showing properly?

If the breadcrumb is not displayed as expected, then there are a few things you may want to check.

• Make sure breadcrumbs are enabled in Genesis Theme Settings

• Check whether you have selected the correct page types for displaying breadcrumbs

• Ensure that the code has been added in the correct file and without syntax errors

• If you are using an SEO plugin, check whether it is outputting another breadcrumb trail

• If you have repositioned the breadcrumb, verify that the hook being used matches your layout requirement

Sometimes the issue is not with Genesis itself, but simply with a setting or a small code error.

Conclusion

Breadcrumb navigation is definitely a handy feature, but like most things on a website, it works best when it actually makes sense for the kind of site you have.

If your website has multiple pages, categories, or sections that users may want to move back through, then breadcrumbs can really help make navigation easier. But if your site is very small and simple, adding breadcrumbs just for the sake of it may not do much.

The good part is that Genesis gives you enough flexibility to enable breadcrumbs and tweak them the way you want. So, if you do need them, you do not have to settle for the default look and position. A few small changes can make them fit your website much better. And if you are already reworking bigger parts of your site, this can also be a good time to bring in a WordPress redesign agency.

Read More

Website Homepage Redesign WordPress: Why Most Homepages Don’t Convert (And the Fix)

“Is There a WordPress Website Redesign Process That Won’t Wreck SEO?” Yes, Here’s the Playbook

How to build a Netflix like website?

7 best corporate training WordPress themes to use