Add a Home Icon to the WordPress Navigation Menu

We love WordPress and work with it virtually every day. The navigation menu that’s been active in WordPress is incredible – a nice drag and drop feature that’s easy to use. If your theme doesn’t have a menu section where you can modify your menus, you need to find a new developer!

With the addition of our Ajax load, I wanted to reduce the size of the home link on the navigation menu and simply put a home icon. Adding an icon isn’t an option via WordPress, though, so we had to add the functionality through our theme’s functions.php file. I found a snippet online for adding the home link to the menu… I just had to modify it to use an actual image instead of the text link.

Add a Home Icon to WordPress

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
function add_home_link($items, $args) {
     if (is_front_page())
          $class = 'class="current_page_item home-icon"';
     else
          $class = 'class="home-icon"';
  
     $homeMenuItem =
          '<li ' . $class . '>' .
          $args->before .
          '<a href="' . home_url( '/' ) . '" title="Home">' .
          $args->link_before . '<img src="[path to your home image]" height="15" width="14" />' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $items = $homeMenuItem . $items;
     return $items;
}

This code adds a class to the image as well so that you can adjust it’s location via your stylesheet.