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"';
$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 .
$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:
Project Management for Creative Agencies Buyer Guide 2018

Project Management for Creative Agencies Buyer Guide 2018

Compare the best Project Management products for agencies in this 2018 market overview report Download Now

One comment

  1. 1

This site uses Akismet to reduce spam. Learn how your comment data is processed.