It is a difficult task and that is why there are 100s of articles on this topic. It is a problematic task probably because the priorities set in the child theme differ or some other plugin or settings or template prevents executing our thought. You can show/hide breadcrumbs from Genesis > Theme Settings > Breadcrumbs. Commonly we want to show the breadcrumbs on the post pages only. In that case, you have to tick mark the “Breadcrumbs on Posts page” and ” Breadcrumbs on Single Post page” options. I do not know why there are two options for the same thing.
What is the Easiest Way to Reposition Breadcrumbs in WordPress Genesis?
The easiest way is to use the official method to remove and then mention the hook to reposition it, for example:
1 2 3 | // Display breadcrumbs only on single post pages, just above footer widgets remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs'); add_action( 'genesis_after_entry', 'genesis_do_breadcrumbs', 998 ); |
If you use the Genesis Simple Hooks plugin (you must use it, it is a mandatory plugin for Genesis customization), then you’ll know the names of the hooks. It is a kind of trial and error. That is how I found genesis_after_entry works.
---
I wanted the breadcrumb near the footer. You can see it in action on my health website (in Bangla language) abhishekghosh.com.
Add the above snippet to your child theme’s functions.php file.
How To Stylize Breadcrumbs in WordPress Genesis and Add Font Awesome Icon?
First, you have to load the Font Awesome CSS file in your theme. I am not explaining that part. You can simply load it as a script or use the wp_enqueue function. This is an example of working CSS in my case:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | .breadcrumb { background-color: #f5f5f5; border-radius: 12px; padding: 1rem 1.25rem; margin: 2rem auto 1.5rem; max-width: 960px; font-size: 0.95rem; color: #333; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .breadcrumb a { color: #0073aa; text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb span { padding: 0 0.3rem; color: #888; } /* Add Font Awesome Home Icon before the first link */ .breadcrumb a:first-of-type::before { content: "\f015"; /* Font Awesome 'home' icon */ font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 6px; } |
Breadcrumb will be now inside a light grey box with rounded corners. The first breadcrumb link (“Home”) will show a Font Awesome home icon. This applies only to the .breadcrumb div Genesis outputs — no markup changes are needed.
