How to Add Home Icon to Genesis Framework Breadcrumb

In this tutorial, we’ll show you how to replace the ‘Home’ text in breadcrumb of Genesis Framework to a nice home icon. Genesis has genesis_home_crumb and genesis_breadcrumb_args to allow users to customize the output of the breadcrumb.

To replace the default ‘Home’ text with the home icon, first you’ll need to register any icon font set such as Font Awesome, Genericons, Dashicon, or an icon font of your own choice.

Here, we’ll be using Dashicons. WordPress has already bundled the Dashicons icon font in the core so you’ll need to enqueue it using the following code.

<?php

//* Enqueue Dashicons icon font
add_action( 'wp_enqueue_scripts', 'afn_dashicons_icon_font' );
function afn_dashicons_icon_font() {
	wp_enqueue_style( 'dashicons' );
}

The code above should go into your child theme’s functions.php file. Next, we’ll use genesis_home_crumb filter to replace the default texts with our home icon. Also, we use home_url() here to automatically link the icon to the front page of our site. The code below also belongs to functions.php file.

<?php

//* Replace 'Home' text with a home icon in Genesis Framework breadcrumb
add_filter ( 'genesis_home_crumb', 'afn_breadcrumb_home_icon' ); 
function afn_breadcrumb_home_icon( $crumb ) {
     $crumb = '<a href="' . home_url() . '" title="' . get_bloginfo('name') . '"><i class="dashicons dashicons-admin-home"></i></a>';
     return $crumb;
}

As you can see, dashicons dashicons-admin-home is the class of our home icon. For Dashicons, you can get this from Dashicons’s official page. You need to use the right class here for the home icon and in case you want to use different icon or want to use other set of icon font, make sure to change class as well.

Now, please refresh your browser and you’ll see a nice home icon in the breadcrumb.

Next, if you want remove the ‘You are here’ texts, that can be done using genesis_breadcrumb_args filter. Here’s a snippet you can:

<?php

//* Remove 'You are here' texts in Genesis Framework breadcrumb
add_filter( 'genesis_breadcrumb_args', 'afn_breadcrumb_args' );
function afn_breadcrumb_args( $args ) {
	$args['labels']['prefix'] = '';
return $args;
}

And here’s after we’ve removed the default ‘You are here’ texts:

In case you want to change thr color of the icon to match the design of your theme, that can easily be done by targeting the right class. Here’s an example:

.breadcrumb .dashicons.dashicons-admin-home {
	color: #de696b;
}

The code above should go into your theme style.css file and it will simply change the color of the icon to red. In case some of you might wondering whether this tutorial can be used on other WordPress themes, then the answer is simply no because the genesis_home_crumb and genesis_breadcrumb_args belongs to Genesis Framework and therefore can only be used on Genesis Framework child themes.