How to Add an Image to the WordPress Navigation

Last modified: January 13, 2020

A while back, I needed to add an image as an item on the WordPress navigation with a link. What I did is add a regular navigation item, hide the text and add a background image, all via CSS. However, it seems that there is a better option. There is a WordPress hook that can be used just for that. It doesn’t have to be an image, it can just be regular text if you want. However, it seems that adding an image is what most people would use this for.

Here is an example of the code which needs to be added to functions.php:

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if ($args->theme_location == 'primary') {
        $items .= '<li><a href="/"><img src="/image.jpg" alt="" /></a></li>';
    }
    return $items;
}

In this example, we first make sure that the image is added to our”primary” navigation (you can remove that if you want. Just delete the if row the closing } ) and then add the image. You would need to add the actual path for your image and change the link unless you want it to point to your homepage.

That’s it…

Pretty simple, right?

* This button will show the rest of the post and open up an offer from a vendor