Add a Home Icon to the WordPress Navigation Menu Using Code

Douglas Karr Thursday, September 14, 2023

1 3 minutes read

We love WordPress and work with it virtually every day. The navigation menu active in WordPress is incredible – a nice drag-and-drop feature that’s easy to use. Sometimes, you create a menu you wish to use throughout your theme without including the home link, though. Here’s some code adding the home link to the menu without using the menu options in WordPress Admin.

Add a Home HTML Entity to the WordPress Nav Menu

Using an HTML entity (🏠) to represent your home page rather than a link that says Home is pretty common. Utilizing the code above, I was able to make a minor edit to include an HTML entity rather than the text:

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 . '&#x1F3E0;' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $items = $homeMenuItem . $items;
     return $items;
}

Add a Home SVG to the WordPress Nav Menu

Using an SVG to represent your home page rather than a link that says Home is also quite useful. Utilizing the code above, I was able to make a minor edit to include an SVG rather than the text:

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 . '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16"><path d="M8.293 1.293a.5.5 0 0 1 .414 0l6.25 3a.5.5 0 0 1 .25.434V13a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4.727a.5.5 0 0 1 .25-.434l6.25-3a.5.5 0 0 1 .414 0zM8 2.618L2.354 5.293 2 5.534V13a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V5.534L13.646 5.293 8 2.618z"/><path fill="#000" d="M7.293 0a1 1 0 0 1 .914 0l6.25 3a1 1 0 0 1 .5.867V13a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3.867a1 1 0 0 1 .5-.867l6.25-3z"/></svg>' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $items = $homeMenuItem . $items;
     return $items;
}

Add a Home FontAwesome Home to the WordPress Nav Menu

If you’re using Font Awesome on your site, you can also use their icon. Utilizing the code above, I was able to make a minor edit to include their icon rather than the text:

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"';
     else
          $class = '';

     $homeMenuItem =
          '<li ' . $class . '>' .
          $args->before .
          '<a href="' . home_url( '/' ) . '" title="Home">' .
          $args->link_before . '<i class="fa fa-home"></i>' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $items = $homeMenuItem . $items;
     return $items;
}

Add a Home Image to the WordPress Nav Menu

Using an image to represent your home page rather than a link that says Home is also a possibility. Utilizing the code above, I was able to make a minor edit to include an SVG rather than the text:

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;
}

Here’s a breakdown of what this code does:

It uses the add_filter function to hook into the wp_nav_menu_items filter allows you to modify the items in a WordPress navigation menu.
The add_home_link function is defined to handle the modification. This function takes two parameters: $items (the existing menu items) and $args (the menu arguments).
Inside the add_home_link function, it checks if the current page is the front page using is_front_page(). Depending on whether it’s the front page or not, it assigns a CSS class to the home link for styling purposes.
It then constructs the HTML for the Home link, including an image with a link to the home page. You should replace [path to your home image] with the actual path to your home image.
Finally, it appends the Home link to the beginning of the menu items and returns the modified menu items.

Make sure to add this code to your theme’s functions.php file in your Child Theme and customize it as needed. If your theme uses a different structure or encounters any issues, you may need to adjust the code accordingly. And, of course, ensure you have a valid image path for the home icon.