1

I currently have a menu structure as followed:

<ul class="level-1" id="menu-menu1">
  <li id="menu-item-411">
    <a href="http://www.link.com">Frontpage</a>
  </li>
  <li id="menu-item-425"></li>
  <li id="menu-item-80"></li>
</ul>

What im looking to do is hardcore a little menu icon image for each different menu id, however im not sure how to manipulate wp_nav_menu to insert something "custom" like this? Ideally what I want to do is something like: if($menu_id == 411) { //insert specific <img>- with some result like this:

  <li id="menu-item-411">
    <img src="my-specific-img-for-this-menu-id.gif" />
    <a href="http://www.link.com">Frontpage</a>
  </li>

Right now my menu is printed out with:

                    $nav_args = array(
                        'theme_location' => 'nav',
                        'container' => 'none',
                        'menu_class' => 'level-1',
                        'depth' => 3,   
                    );

                    wp_nav_menu( $nav_args );

Any ideas?

2

Creating a custom Walker is a valid way to solve this, and is the first thing that crossed my mind, but it is not strictly necessary. It is possible to pull this off with filters, albeit by mildly abusing one of them :)

Proof of concept:

function insert_image_wpse_130477($item_output) {
    remove_filter('walker_nav_menu_start_el','insert_image_wpse_130477');
    $prepend = apply_filters('my_item_prepend','');
    return $prepend.$item_output;
}

function check_id_wpse_130477($id, $item, $args) {
  if ('menu-item-6' == $id) { // edit for your circumstances
    add_filter(
      'my_item_prepend',
      function() use ($id) {
        // add logic to conditionally add your images based on the ID
        return '##'.$id.'##';
      }
    );
    add_filter(
      'walker_nav_menu_start_el',
      'insert_image_wpse_130477'
    );
  }
  return $id;
}
add_filter('nav_menu_item_id','check_id_wpse_130477',1,3);

I can think of several other ways to do this-- a class, for example, or a single more complicated callback and a static variable-- but this is probably the easiest to follow.

0

You need to do a custom walker on the menu (link) which allows you to rewrite the navigation code to your needs.

  • Hi Gareth, answers should be more detailed than a link. – Wyck Jan 21 '14 at 2:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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