There’s a good chance that you’re already using the WordPress SEO by Yoast plugin on your site. As I’m writing this, there have been 11,575,494 downloads from WordPress. If you’re using the Genesis breadcrumbs, you should refer to this post instead.
There’s also a good chance you’re already using the very popular Font Awesome icons. If not, you can refer to the same post referenced above to see how to use them, or you can use whatever icon or image that you’d like.
If you’re using the WordPress SEO by Yoast plugin, replacing the “Home” text with an icon takes just one step.
Add Your Home Icon HTML
In your wordpress admin menu (left side of your screen), go to SEO > Internal Links and enter your icon or image html in the field that says “Anchor text for the Homepage:”, then press the “Save Changes” button and your done.
By default, your breadcrumbs will show as:
Home / Blog / Replace Genesis Breadcrumbs Home Text with Icon or Image
Once you follow the step above, your breadcrumbs will now look like:
/ Blog / Replace Genesis Breadcrumbs Home Text with Icon or Image
Please note:
If you’re not already using Font Awesome (or WordPress Dashicons), you’ll have to take a second step to include them by enqueuing the Font Awesome stylesheet (adding this to your theme’s functions.php file):
[gist id=”cd4691da9aecfa582daf” file=”genesis-enqueue-fontawesome-css.php”]
A couple of other things to consider are how this affects SEO and how it affects accessibility since you’re removing the “Home” text. If you have any thoughts about either of these, I look forward to the discussion in the comments.
smutek says
Hey, thanks for this. It’s getting late, I’m getting tired and I was about to start wracking my brain trying to target the Home text to hide it with css. Did a quick google and had no idea it was this easy. 🙂
Regarding the SEO, how about just adding some screen reader friendly HTML to hide the home text? For example, the .sr-only class, if you are using Bootstrap, or the .screen-reader-text class if using underscores.
This is what I’m using in anchor text box in the Yoast plugin –
Home
See attached image for the HTML it outputs. I’m guessing that should satisfy the SE’s?
Thanks again for the simple solution – have a good one!
smutek says
Sorry – comment system stripped my html down, here’s what I’m using in the settings box:
Tony Eppright says
Hi smutek! Thanks for your comment…great idea. It looks like that would be a great way to make the crumbs more accessible as well.
I’ll try to update the article to mention that when I can.
Thanks for sharing!
rapOnline says
Hi smutek, if it is just to hide the “home” reference on the index page, but to let it turn up in the breadcrumbs on every other page or post, you can also leave the achor textbox empty and use the prefix pathbox to keep your “home”, icon or whatever html you would like to show up in the hierarchy of the breadcrumbs. This way “home” or the icon appears on every other post or page, but stays hidden on the homepage. If that is what you where looking for.
Update: You could f.i. use:
Bernhard Rieder says
Does anybody know how to change the ANCHOR TEXT for the breadcrumbs?
for example:
https://example.com/page/hi-there/
I would like to change the Anchor Text from the slug “hi-there” to “This is my new anchor text for hi-there”.
How can you change that ?
Tony Eppright says
@bernhardrieder:disqus sure you can do this with yoast. On the page or post you want to change the breadcrumbs text for, click the gear icon (Advanced) in your Yoast settings.
You’ll see the “Breadcrumbs Title” field where you can change it.
Bernhard Rieder says
Awesome. Thank you so much Tony. That was spot on. Appreciate it!
Tony Eppright says
My pleasure, glad I could help! Have a great weekend 🙂
Verena says
Unfortunately gets an error in the Google search console because the name is missing in the ListItem when using an Icon. It’s a pitty. Do you know how to set the name attribute with the icon?
Tony Eppright says
Hi Verena, I’m sorry I switched from Yoast a while ago and this is pretty dates so wasn’t aware of this problem.
I’ve never tried this specifically, but you can try using i class=”fa fa-home” name”yourname”.
I’m not sure if you’re saying it has to be on the icon element or on the parent html which would probaby require using a filter to make the changes.
You can also do this using CSS…if that’s better let me know and I’ll see if I can help.
Please let me know if that worked for you.