Content Marketing

Add a Home Icon to the WordPress Navigation Menu Using Code

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.

Appreciate this content?

Sign up for our weekly newsletter, which delivers our latest posts every Monday morning.

We don’t spam! Read our privacy policy for more info.

Douglas Karr

Douglas Karr is a fractional Chief Marketing Officer specializing in SaaS and AI companies, where he helps scale marketing operations, drive demand generation, and implement AI-powered strategies. He is the founder and publisher of Martech Zone, a leading publication in marketing technology, and a trusted advisor to startups and enterprises alike. With a track record spanning more than $5 billion in MarTech acquisitions and investments, Douglas has led go-to-market strategy, brand positioning, and digital transformation initiatives for companies ranging from early-stage startups to global tech leaders like Dell, GoDaddy, Salesforce, Oracle, and Adobe. A published author of Corporate Blogging for Dummies and contributor to The Better Business Book, Douglas is also a recognized speaker, curriculum developer, and Forbes contributor. A U.S. Navy veteran, he combines strategic leadership with hands-on execution to help organizations achieve measurable growth.

Related Articles

Back to top button
Close

Adblock Detected

We rely on ads and sponsorships to keep Martech Zone free. Please consider disabling your ad blocker—or support us with an affordable, ad-free annual membership ($10 US):

Sign Up For An Annual Membership