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.

Previous What the @$#@ happen to Godaddy?
Next Add You Own Custom Share Image for Each Page or Post - Wordpress Plugin

About author

Jarrett Gucci
Jarrett Gucci 289 posts

Jarrett Gucci is the owner of Dynasty Web Solutions. A full service Internet presence provider specializing in WordPress development for business owners. Jarrett Gucci along with his team of professionals have designed over 400 WordPress websites. Jarrett Gucci believes strongly in creating websites that are unique, functional and generate referrals.

You might also like

Ninja Tricks 0 Comments

Custom Facebook LIKE Box | Customize Facebook LIKE Box Using CSS

The Facebook Like box placed on your website /blog is probably the easiest way to attract new fans to your Facebook page. And the same rectangular box can even help

Ninja Tricks 0 Comments

Change the YouTube Embed Image to Custom Image

If you want a specific preview image for your YouTube video, you’re pretty much out of luck. When you upload a video, YouTube chooses 3 frames from your video based

Ninja Tricks 0 Comments

YouTube Embed Code Options – Have it Autoplay

Here are some problems I face when embedding YouTube videos on my website. First, the user has to click on the “play” button for the video to play. People who

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply