Modifying WP menu html OutPut

  • elliotrobert

    (@elliotrobert)


    14 years, 10 months ago

    I’m creating a horizontal menu which mimics in look and feel, those tare-off carnival tickets. Because different menu items will be different lengths I want the width of each ticket to be expandable based on the word length. To do this I have a repeated center image of the ticket and then two ticket ends on each side.

    My question is given WP’s standard menu system creates a unordered list, where can it be customized to place the ticket ends on each side? For Example, this is what WP gives me when I create a standard custom menu using the GUI:

    <ul>
<li><a>First Menu Item</a></li>
<li><a>Second Menu Item</a></li>
</ul>

    And here is what I need to make it generate dynamically.

    <ul>
   <img class="leftTicket"/>
<li><a>First Menu Item</a></li>
<img class="rightTicket" />
   <img class="leftTicket"/>
<li><a>Second Menu Item</a></li>
<img class="rightTicket" />
</ul>

    This way each menu item will have ticket ends on each side. Where is wp outputting this unordered list from? Clearly the menu items are being stored in the database but what about the actual unordered-list it’s encapsulated in? Is it in a function, if so, in what file? I can’t find it in function.php.

    I’ve spend a full day on this and I acknowledge now, I need help. Any help any of you could provide would be greatly appreciated.

    Thanks
    -Elliot Robert

Viewing 4 replies - 1 through 4 (of 4 total)
  • s_ha_dum

    (@apljdi)

    14 years, 10 months ago

    You will probably need to create a custom ‘Walker’– something like this.

    Also, you should have those images inside the lis to keep the markup valid.

    Thread Starter elliotrobert

    (@elliotrobert)

    14 years, 10 months ago

    apljdi Thank you for the information. ‘Walker’ Is a new word in my CMS vocabulary and I’m not sure I’ve yet fully grasped it. I think that example is for advanced wp developers. I’m going to play around with it and see what I can get it to do.

    However, is there not a For Each loop in wp that is generating the menu? Some thing that would look for each of the items in the menu print the <li>. Wouldn’t it be easer to simply modify this if it exists? Dose any one know where wordpress is generating the unordered list from, what file?

    I’m more familiar with Drupal and would already have this done if I was using it but I want WordPress Experience. Please tell me if I must bite the bullet and spend a few extra hours learning a different way.

    Thank you for your time.

    s_ha_dum

    (@apljdi)

    14 years, 10 months ago

    ‘Walker’ isn’t really CMS vocabulary. Its the name of the class that WordPress uses to display “various tree-like structures”, as the class’s inline docs read. You can find the Walker class in wp-includes/class-wp-walker.php. That class is extended to output several different types of content. If your theme uses the menu system in wp-admin->appearance->menus, this is what you have to modify to change the output. There isn’t a foreach loop. However, if you look at the code in the link you can see where the list items are generated. Look at line 28.

    I’ve thought about it some, and there are other possibilities. The menu Walker (Walker_Nav_Menu in wp-includes/nav-menu-templat.php) will accept ‘before’ and ‘after’ parameters so if find where wp_nav_menu() is called in your theme and add those two elements to the array, I think you can shove your before and after images in that way.

    Thread Starter elliotrobert

    (@elliotrobert)

    14 years, 10 months ago

    The menu html is outputted in nav-menu-template.php in side wp-includes file. Look for the <li tag it’s outputting. I hard coded it from here. Thanks again for your help apljdi.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Modifying WP menu html OutPut’ is closed to new replies.