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 :
font-size: 12px;
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.
About Vivek Kumar Poddar
Nice Tutorial. Though I am not on wp yet but soon will migrate and then such tuts will be helpful
You don’t only need wp, but also need genesis theme framework..
Thanks for the tutorial, I was wondering if you had any idea how come our website text color is being forced to white when being viewed on my iPhone. I have been looking everywhere for an answer! I’ve looked in the style.css under media queries and I can’t find any reference to white text. Please help!
For an example, just look at our bread crumbs on pc and then on mobile, you’ll see one is black text and one is white!
Well if you can’t find thing like color”#fff; then please add your desired text color like color:#323232 or color:#424242 under your media query and within the ” post{ ” or ” content{ ” structure .
I actually visited yoou site and re sized my browser, but the text appearance seems to be good. Check the above steps and tell me if everything is fine.