A recent article I wrote titled How to Customize Genesis Breadcrumbs detailed the steps involved in customizing the output of the Genesis Framework breadcrumb. In this article I’ll show you how to actually move the breadcrumb to a new location and how to style it to your liking.
Changing the Breadcrumb Location
Log in as an admin and open up the file Functions.php. Scroll to the bottom of Functions.php and paste the code below into the file. In the example below I’ve located the breadcrumb to be displayed in between the header and the inner content of my site. Click the update file button to save your changes.
/**
* Move the Genesis breadcrumb
*
* @author Rick R. Duncan
* @link http://www.buildbrandbelieve.com
*
*/
remove_action('genesis_before_loop', 'genesis_do_breadcrumbs');
add_action('genesis_after_header', 'genesis_do_breadcrumbs');
The image below illustrates the new location of the breadcrumb within the Nomadic Theme.
Styling the Breadcrumb
In my case simply moving the breadcrumb wasn’t enough. Once the breadcrumb moved it was all the way to the left of my page. I needed it to be centered like you see in the image above. To move it to the center of the page I had to create a wrapper div inside of my breadcrumb function named custom_breadcrumb_args found in Functions.php. Simply go to this previous article How to Customize Genesis Breadcrumbs and scroll down to the last screenshot. Look at lines 15 & 16. In that code example there is class named wrap. Now look at lines 15 & 16 in the code below. It’s been updated to add a class named wrap on line 15 and a closing div tag on line 16.
Take the whole chunk of code below and add it to Functions.php. If you prefer, leave out the content you don’t plan to change as it’s not needed. To keep it simple, I would recommend you take all the code and paste it into Functions.php. I’m just sayin…
/**
* Relocate Genesis breadcrumb display
*
* @author Rick R. Duncan
* @link http://www.buildbrandbelieve.com
*<code>
* @param array $args Default breadcrumb arguments</code><code>
* @return array Amended breadcrumb arguments</code>
*/
add_filter('genesis_breadcrumb_args', 'custom_breadcrumb_args');
function custom_breadcrumb_args( $args ) {
$args['home'] = 'Home';
$args['sep'] = ' » ';
$args['list_sep'] = ', '; // Genesis 1.5 and later
$args['prefix'] = '<div id="breadcrumb"><div class="wrap">';
$args['suffix'] = '</div></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;
}
Style.css – The Final Customization
I wanted my breadcrumb to be centered on the page. The only styles I needed is what you see below. Add the code below style.css and you should be good to go.
#breadcrumb .wrap {
margin: 0 auto;
width: 960px;
}
As all themes are slightly different a few tweaks may be needed for your implementation. The overall task will be the same for all of the Genesis Framework Themes. Just be aware that you may have to make a few additional tweaks for your own specific use.
