What Are Breadcrumbs in WordPress. For instance, an example display of Breadcrumbs Navigation is Home Category Small category Posts qualifies as an exhibition of breadcrumbs. Plus, breadcrumbs are food for thought when you are considering optimizing your website for search engines. Support request Change the 'Home' text in breadcrumbs Home » Topics » Tyche » Change the 'Home' text in breadcrumbs Home › Forums › Tyche › Change the 'Home' text in breadcrumbs This topic contains 3 replies, has 3 voices, and was last updated by Noda 8 months ago.
The Genesis Framework comes equipped with its own Breadcrumb code that’s easy to edit for your specific needs. Below you will find over half a dozen ways to customize the Genesis breadcrumbs so that they will display exactly as you need.
To get started, you must first enable breadcrumbs through the WordPress admin dashboard. Log into WordPress and then navigate to Genesis -> Theme Settings. Scroll down the page until you see the box labeled Breadcrumbs.
Simply click the box next to the content/page types in which you want breadcrumbs to be displayed.
If you’re interested to see the details of the Genesis breadcrumb, take a look at the Genesis_Breadcrumb class found in the genesis/lib/classes/breadcrumb.php. Be sure you DO NOT make any changes to that file as they will be lost with the next upgrade to Genesis. Instead, make your code changes inside of functions.php or better yet, inside of a functionality plugin using the methods I’ve outlined below.
STOP! Before making any changes to functions.php you should make a backup and have access to your website using FTP should something go wrong.
Default Arguments
The code snippet below details the default arguments that can be filtered within the Genesis_Breadcrumb class found in the genesis/lib/classes/breadcrumb.php.
View the code on Gist.
Remove: You are Here
The code snippet below demonstrates how you can remove the text “You are here” from the front of your breadcrumb trail.
View the code on Gist.
Change: Home Text
The word home at the beginning of the breadcrumb trail can also be customized. Simply use the code below and change it to whatever you like.
View the code on Gist.
Change: Home Link URL
There might be times when you want the ‘Home’ link to point to a different location. One example might be a forum on a sub-domain. You might want ‘Home’ to point back to your main domain and not your sub-domain.
View the code on Gist.
Change: Breadcrumb Separator
The code snippet below will help change what is being used as the breadcrumb separator. I used ascii.cl to find a separator.
View the code on Gist.
Change: Breadcrumb Labels
All of the labels can be changed. We’re talking category pages, author pages, tag pages and more. If you take a look at the very first code snippet above, it details all of the labels in which you can filter. The example below is for a single label which used on the “Author” page.
Refer to the Default Arguments list above to change other labels.
View the code on Gist.
Remove: Breadcrumb from Specific Page
Use the code below to remove the Genesis breadcrumb of a specific page.
View the code on Gist.
Re-position / Move Genesis Breadcrumb
There will be times when you want to move or relocate the Genesis breadcrumb. The code snippet below demonstrates how to move the Genesis breadcrumb to the bottom of content page. This works for both pages and posts.
Visit StudioPress for the complete list of Genesis Hooks or better yet, a visual hook guide provided by genesistutorials.com.
View the code on Gist.
Add Home Icon Using FontAwesome
If you want to add a home icon to your breadcrumb trail like can be seen in my implementation, that can be done too. It takes 2 steps. First is to enqueue the FontAwesome css file and second is to filter the home icon.
View the code on Gist.
Other Breadcrumb Tutorials
- Hi vnfan!You need to use the icon name ( I can not see it anywhere listed on what you provided ) in the following:.breadcrumb-trail > span:nth-child(2), .breadcrumb-trail > span:nth-child(3) {
content: “”;
}where the content, has to be the icon name.
Please do let me know if that works out for youCheers!
BasilisHi,We would like to check the page but it is currently on maintenance mode. Please post the login details here so that we can check it. Or try this in the Quick CSS field:Best regards,
IsmaelHi,Alright. Let us know if you need more help in the future. Please feel free to open a new thread. :)Best regards,
Ismael