Modify & Reposition Genesis Breadcrumb

elegant themes affiliate

Want to modify or reposition genesis breadcrumb, here two simple code snippets to help you. Actually, breadcrumb navigation has lots of importance considering the SEO and user experience. It helps your readers and customers to easily navigate through your categories and posts. Additionally, it even helps Google to form the site link structure or your website. This, in turn, helps to display your post links, categories in search results.

But sometimes it hinders the appearance of your website. If you own a design based blog, portfolio or online magazine then you would like to present best website design to your readers. Now in such case placing the navigation above the post title usually destroy the elegance of your typography and so we need to replace it.

And if you are using Genesis theme framework, then the task becomes extremely easy. With the use of one simply hook you can easily replace genesis breadcrumb to your desired position. And with CSS, you can give the suitable look and feel.

Reposition Genesis Breadcrumb

Genesis breadcrumb code snippet

Below I am sharing the code to complete the task. But before move on, make sure to follow the precautionary steps, since if you place the snippet in the wrong position then you site may be offline temporarily.

  • Create a complete backup of your function.php file.
  • Use any ftp software to connect your hosting file manager.

If by chance any thing wrong happens then you will be able to easily restore your function. This will help to keep your website online.

remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
add_action( 'genesis_after_header', 'genesis_do_breadcrumbs' );

But if you are using any custom build child theme, like my website’s then you might have different locations. In my case, it was below the header area.

/** Reposition breadcrumbs in genesis */
remove_action( 'genesis_after_header', 'genesis_do_breadcrumbs' );
add_action( 'genesis_after_post_content', 'genesis_do_breadcrumbs' );

You can replace the genesis_after_post_content with any hook present in the reference page. Now copy the complete code and place it at your function.php file. I will suggest to place it at the bottom, then click on update. Now refresh your website and you will see the changes.

Modify Genesis Breadcrumb

The snippets shared below will allow you to change the arguments and text appeared in your breadcrumb.

add_filter( 'genesis_breadcrumb_args', 'child_breadcrumb_args' );
function child_breadcrumb_args( $args ) {
$args['home'] = 'Home';
$args['sep'] = ' / ';
$args['list_sep'] = ', ';
$args['prefix'] = '<div class="breadcrumb">';
$args['suffix'] = '</div>';
$args['heirarchial_attachments'] = true;
$args['heirarchial_categories'] = true;
$args['display'] = true;
$args['labels']['prefix'] = 'You are here: '; // Chance this to your own text
return $args;
}

Now copy the complete snippet and now place it at the bottom of your function file. As you can see above, there are so many different arguments. You can also add some additional ones like;

$args['labels']['search'] = 'Search for '; // For search page
$args['labels']['404'] = 'Not found: '; // For 404 error pages

Now if you want to customize the design and style, then you can follow some suggestions below.

.breadcrumb{
	color:#222;
	font-size:12px;
	text-align:center;
	padding:10px 15px;
	margin:0 auto;
        text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}

.breadcrumb a, a:visited {
	color:#000;
	transition-duration:.3s;
	-moz-transition-duration:.3s;
	-webkit-transition-duration:.3s;
	-o-transition-duration:.3s;
	}
	
.breadcrumb a:hover {
        color:#2F9BC2;
        transition-duration:.3s;
        -moz-transition-duration:.3s;
        -webkit-transition-duration:.3s;
        -o-transition-duration:.3s;
	}

I have added the text-shadow so that to make your text clear in Google chrome browser. Actually, there is a problem with chrome, as it can’t render the web fonts properly and so they seem to have flickered pixels. Using the drop shadow, we can reduce its impact and smooth the corner lines.

So use these code snippets and they will help you to customize and reposition genesis breadcrumb. For any query, you can use the comment area.

1 thought on “Modify & Reposition Genesis Breadcrumb

  1. Hi Vivek, thanks for the article. I am looking to change the text of my breadcrumbs (I want them to be shorter than the page title). Do you know of a way to manually override the breadcrumb for each page?

Leave a Comment