How to insert custom code into wp_nav_menu structure?

2 Views

I was able to use <?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => false ) ); ?> to create the menu within my theme. Messed around with ‘items_wrap’ but couldn’t get it to display correctly.

I need to add an image and container div into the sub menu ul before the li’s. This is the structure I want:

    <ul id="nav">
    <li><a href="#">Page</a>
        <ul>
            <img src="<?php bloginfo('template_directory'); ?>/images/nav_ul_tab.png" class="nav_ul_tab" />
            <div class="nav_spacer">
                <li><a href="#">Sub Page</a></li>
                <li><a href="#">Sub Page</a></li>
                <li><a href="#">Sub Page</a></li>
            </div>
         </ul>
    </li>
   </ul>
Post Views: 2

Related posts

Leave a Reply

2 comments

  1. What you want is invalid markup. The only children an ul can have are li. Use CSS instead:

    #nav ul
{
    padding-top:    40px; /* Your image size. */
    background:     url(/path/to/your/image/img.png) top center no-repeat transparent;
}

  2. We can insert the image via Jquery. Here is the code. Before execute this code make sure JQuery JavaScript should be load in your page.

    <script type="text/javascript">
   jQuery(document).ready(function(){
        jQuery("#nav li ul .nav_spacer").before('<img src="<?php bloginfo('template_directory'); ?>/images/nav_ul_tab.png" class="nav_ul_tab" />')
   });
</script>