Create a WordPress Menu With Images – No Plugin Needed

WordPress makes it easy to create and adjust navigation menus but one thing that is difficult to do is create a menu that is image based.  Yes there are many plugin out there that will do this and most of them will cost you a few pennies, but I have found a way to accomplish this without using a plugin and simply using the built in menu system that comes standard with WordPress version 3 and higher.

Take your menu look from this:

To this:

Here are the steps below.

Step #1 – Create a Menu

Go into the administrative area of your WordPress website and then Appearance > Menus and create new menu. You may name it what ever you like.

Step #2 – Create HTML code

In this step we are going to create HTML code for the image you want as the menu item to replace standard boring text. The HTML code below will be used in step 3. You need to make adjustments to this code for each menu item. The adjustments you will make are the URL that the image with link to and the URL path of the image itself. Simple copy the code below and paste it in your favorite text editor. Then you will change out the 2 areas mentioned, URL_YOU_WANT_IMAGE_TO_LINK_TO & IMAGE_PATH_WILL_GO_HERE.
**Please note that image size should be no higher than the height of your navigation area.**

 

Step #3 – Create a Menu Item
We will now put the HTML code we created in step #2 into action as our 1st menu item in our image based menu.  See the image below for placement of the HTML code.


Step #4 – Adjust Menu Item
Now that we have added the item to our menu we need to make sure that we remove any text that is in the URL field.  Please see image below.


Step #5 – Save Menu & Activate
Now all we have to do is make sure we hit the blue save menu button and the bottom and then select it as the menu for your theme and save.

That is it.  Just follow steps 2-5 for additional menu items.