A simple guide on how to Customize and Reposition Genesis Breadcrumb. In order to get desired position we have to edit the function.php file. We have to just place some hooks and then its ready.
For better customization you can even use CSS. I will come to it later. So lets start our work. But please sure that you have your web file manager or ftp open, since any mistake in function file will make your site temporarily offline.
Reposition the Genesis Breadcrumbs
Just copy the above code and place it in your function.php file.
/** Reposition the breadcrumbs */
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
add_action( 'genesis_after_header', 'genesis_do_breadcrumbs' );
Customize breadcrumbs display
Over here we will alter the text like ” YOU ARE HERE “. And really simple and easy to understand.
” You Are Looking At: ” is just an example, you can change it to almost anything and it will be displayed within your breadcrumb. Similarly you can change the ” Home ” text.
Using Custom CSS
I think every one need some unique look. So its really necessary to edit your design on your own, so that you could get what you actually deservs. In this guide you will learn how to add the custom background color or image, padding and margin for your breadcrumb.
Please follow the steps listed below :
- Visit wordpress theme editor
- Click on stylesheet ( style.css )
- Now find ” .breadcrumb “
In order to add the custom background image add these codes under ” .breadcrumb ” :
background: url(" url of the image with http:// ") repeat scroll 0 0 transparent;
background-color: #color code;
For adding the box shadow use :
box-shadow: 0 1px 2px #your color code;
For customizing the font size :
Inorder to add the margin you can use :
margin: 0 auto 8px;
If you any further question regarding the customization of breadcrumb in genesis theme, then you may ask it in comment area.