Customized wp_nav_menu()

I am looking to add an image to the dropdown in the wp_nav_menu() using the walker class. I want to do it based on menu-item-id. Any thoughts on how to go about doing this?

I know you can add <img> tags to the label using the custom menu item in the backend but I want to pull this image dynamically.

I did a bit of fiddling the other day and came up with this…
I wanted just the sub menus to appear and show the parent page as a heading above it.
If you are on a subpage the link stays active.
I created a custom sidebar and made up my own css.
Hope this helps.

<?php
global $wp_query;

if( empty($wp_query->post->post_parent) ) {
$parent = $wp_query->post->ID;
}else{
$parent = $wp_query->post->post_parent;
}
if( empty($parent)){
$parent = wp_list_pages(title_li);
}
?>
<?php if(wp_list_pages("title_li=&child_of=$parent&echo=0" )): ?>
<h2 class='left'><?=get_the_title($post->post_parent);?></h2>
    <hr />
<nav id="side-nav">
<ul class="navList">
<?php wp_list_pages("title_li=&child_of=$parent" ); ?>
</ul>
</nav>
<?php endif; ?>

The output looks like this..

<h2 class='my_custom_class'>page_parent</h2>
    <hr />
<nav id="my_custom_class">
 <ul class="my_custom_class">
   <li class="page_item"><a href="#">page_item</a>
 <ul class='children'>
    <li class="page_item child"><a href="#">children</a></li>
 </ul>
   </li>
   <li class="current_page_item"><a href="#">current_page</a></li>
 </ul>
</nav>

Hope this helps,
Matt

I’m looking for a way to customize wp_nav_menu as follows:

1 – remove auto-generated item IDs
2 – remove auto-generated item classes, except for:
2a – “current-menu-item”
2b – the custom class added through “CSS Classes (optional)” field

I was able to accomplish 1-2a using filters, like so:

add_filter('nav_menu_item_id', 'custom_nav_menu_item_id', 100, 1);
add_filter('nav_menu_css_class', 'custom_nav_menu_css_class', 100, 1);
function custom_nav_menu_css_class($var) {
	return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
}

But I’m having trouble separating custom class (2b) from other auto-generated classes.

Any help would be appreciated.

Hi LoremIpsum,

You could accomplish all your questions with a custom nav walker. You can look at the wp_nav_menu codex article, and use the following Google Search to get more details about how to actually create one.
Cheers!

Found an answer to my question here.

Glad you were able to find an answer to your question. In my personal experience, I have found that custom nav walkers are way more… “powerful” if you will to control the HTML output of nav menus, but that depends on your needs and preferences.

To the OP (wp_oulu): it would be great if next time you could give feedback to people’s replies and, if the answer(s) was(were) helpful, mark the thread as ‘Resolved’ so other people can benefit from the thread. Thanks!

hi,
anyone knows or can suggest where to post the following request:
i have Wp 3.3.2, from my admin Dashboard on the top left corner side (located under https://mydomain.com/wp-admin/index.php), there is this Icon “W”
mouse over will display 5 different links:
– About wordpress, www.ads-software.com, documentation, support forums, feedback).

how can i remove/rename or disable these linsk with their menus?
i don’t want my customer to see these unwanted links.

@liaonheart2308 – you should be able to go to links and simply remove the links. After that, they should be gone, if not, let us know.

I actually have a question of my own. I’m working with the mantra theme and want a horizontal bar type sub-menu for pages, instead of the drop down menu it currently has for pages. There are a great many examples of this type of menu, one such is Webhostingtalk

Of course, I would have to make sure it matched my current theme, but that’s pretty much what I want, and the closest thing I’ve found is from Darren Hoyt but it doesn’t work with my theme and I would personally like to stick with using the wp_nav_menu() if possible.

hi,
i deleted some links but they are not relative to the menu:
About wordpress, www.ads-software.com, documentation, support forums, feedback).

the above menus & links are still there.

@einder and @lionheart:
None of your posts have anything to do with the OP’s question. Please create separate threads and I will try to help you out.

Sorry Marventus..mine is now posted elsewhere (couldn’t post in this section of the forums). Will remember next time to try and directly reflect the OP.

No worries. I try to help out organize threads because that way solutions are way easier to find.
I’ll take a look at your other thread.
Thanks!

<style>
#menu ul li:current_page_item a
{
color:#666;
}
</style>

current_page_item will be active your menu
in style.css

<div id="menu">
<ul>
<?php wp_nav_menu('menu=main_menu'); ?>
</ul>
</div>

in header.php
1: menu = our own custom menu
2: main_menu = is the name of register menu you can change it (top_name, bottom_menu,sidebar_menu,etc) if you want.

I prefer to clean up the output using regexp than using walker, and faster.

Faster? yes, but also, more resource-intensive. Plus, Regex’s are not recommended for parsing HTML code.
My 2 cents.