Creating a custom menu with images as each link

There are a few ways to have images as them menu links. Since you already have the wp_nav feature I’d suggest using it to add your images. Here is a quick way to do it:

Step One

Add a new custom nav menu:

The WordPress Menu Screen

Step 2

Add a temporary page and upload the image for the menu:

Adding the image to the page editor

Step 3

Switch to HTML view select the text and link it to the page it will represent in the menu

Select the html for the image
Note: You don’t have to use the editor but for most users it’s easier if they don’t know html. You could just use this format if you’re more comfortable:

<a href="http://the-page-it-represents.com/"><img src="http://your-website.com/wp-content/uploads/2012/01/Profile.png" alt="" title="Profile" width="48" height="48" /></a>

Step 4

Add a custom menu item
Paste the text into the Label text box of the custom menu-item. You can just use # as the URL. Then click the add menu item button and you’ve got you’re first image.

Add the image to the menu

Step 5

Menu Positioning

I recommend using Firefox with either Firebug or the Web Developer Plugin. Here is the item without the style and the web developer plugin used to find the ID:

Use Firebug to get the menu items ID

Continue adding them until your finished. This will allow you to add on to it later and can be used with drop-down navigation also. There are other ways to do this, but this one works pretty well.