WordPress

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.

Download a Sponsored Marketing Whitepaper:
5 Ways Service-Based Experts & Leaders Create an Endless Source of Ideal Clients Without the Burnout and Hustle

5 Ways Service-Based Experts & Leaders Create an Endless Source of Ideal Clients Without the Burnout and Hustle

Are you tired of working many hours on your marketing, hustling nonstop, and getting lackluster results from all the work you're putting in? Download Now

One comment

  1. 1