Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

In my current template my main navigation is output by a simple wp_nav_menu function. Now I am thinking of replacing it with a unordered list with background images in css. Assuming I do this I need to put in the direct link to the page, including it's id#, is there a wordpress function that will allow me to grab each pages location separately and place it in the corresponding list item for my main navigation I am creating.

something like

<ul>
<li class="nav1"><a href="**wordpress function for 1st nav**"></a></li>
<li class="nav2"><a href="**wordpress function for 2nd nav**"></a></li>
</ul>
share|improve this question

1 Answer 1

up vote 0 down vote accepted

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.