2

I have used theme twenty thirteen a my base theme and Have tried used code from https://stackoverflow.com/questions/12159486/wordpress-change-header-navigation-list-items-to-div when I try to validate the page I get an error with invalid trailing </li> tags I am trying to create this result from the walker class

<div class="box1">
    <a href="#"><span class="click"></span></a>
</div>
<div class="box2">
    <h1 class="#">text</h1>
</div>
<div class="box3">
    <a href="#"><span class="click"></span></a>
    <h3 class="#">Text<span class="#">></span></h3>
</div>

But always end up with trailing </li> tags can anyone help with this problem

I tried this first

class Description_Walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args)
    {
        $classes = empty($item->classes) ? array () : (array) $item->classes;
        $class_names = join(' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        !empty ( $class_names ) and $class_names = ' class="'. esc_attr( $class_names ) . '"';
        $output .= "<div id='menu-item-$item->ID' $class_names>";
        $attributes  = '';
        !empty( $item->attr_title ) and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
        !empty( $item->target ) and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
        !empty( $item->xfn ) and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
        !empty( $item->url ) and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';
        $title = apply_filters( 'the_title', $item->title, $item->ID );
        $item_output = $args->before
        . "<a $attributes>"
        . $args->link_before
        . $title
        . '</a></div>'
        . $args->link_after
        . $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

and put this in the header

wp_nav_menu(
    array (
        'menu' => 'main-menu',
        'container' => 'div', // parent container 
        'container_id' => 'my_nav', //parent container ID
        'depth' => 1,
        'items_wrap' => '%3$s', // removes ul
    'walker' => new Description_Walker // custom walker to replace li with div
    )
);

I have tried modifying this code but I all ways get trailing </li> tags do you think you could point me in the right direction been work on this problem for over a week others seem to have the same problem and I have tried what has been suggested but to no avail. by the way this code was provided by RCV

3
  • 1
    Can you show us the actual markup you are getting, so we can see where the </li> tags are showing up? Also, have you disabled all plugins while testing? Nov 14, 2013 at 3:44
  • this is the output I am getting using the code suplied by RCV <div id="my_nav""> <div id='' class=""> <a href="localhost/wordpress/">Home</a> </div></li> <div id='' class=""><a href="localhost/wordpress/?page_id=2">Test</a> </div></li> </div> I have just remove the class and id's to make more readable Nov 14, 2013 at 16:32
  • Hi Charles I have done clean install so there is so plugins installed also the output is the result of just copying and pasting the code into functions.php and header.php as stated by RCV Nov 14, 2013 at 18:00

2 Answers 2

5

just been reading an article on removing <li> elements from wp_nav_menu (http://css-tricks.com/snippets/wordpress/remove-li-elements-from-output-of-wp_nav_menu/) and the code suggested is

$menuParameters = array(
  'container'       => false,
  'echo'            => false,
  'items_wrap'      => '%3$s',
  'depth'           => 0,
);

echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );

have you tried this ?

3
  • This seems to work but it strips everthing out but '<a>' tags so I have tried echo strip_tags(wp_nav_menu( $menuParameters ), '<a><div>' ); and I am starting to get somewhere I'll keep you posted Nov 16, 2013 at 11:48
  • simple and does the job
    – DevWL
    Dec 15, 2016 at 5:41
  • Thanks much works perfectly.
    – Arman H
    Jul 3, 2022 at 10:51
4

You need to do something with the function end_el. I made a custom walker to generate a select menu and I didn't get clean output until I overwrote end_el and generated the closing option tag in there. Trying to do it all in start_el() was causing headaches.

Try removing the closing div from this line

. '</a></div>'

and change it to only close your anchor like this.

. '</a>

then override the end_el function like this

class Description_Walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args)
    {
        $classes = empty($item->classes) ? array () : (array) $item->classes;
        $class_names = join(' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        !empty ( $class_names ) and $class_names = ' class="'. esc_attr( $class_names ) . '"';
        $output .= "<div id='menu-item-$item->ID' $class_names>";
        $attributes  = '';
        !empty( $item->attr_title ) and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
        !empty( $item->target ) and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
        !empty( $item->xfn ) and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
        !empty( $item->url ) and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';
        $title = apply_filters( 'the_title', $item->title, $item->ID );
        $item_output = $args->before
        . "<a $attributes>"
        . $args->link_before
        . $title
        . '</a>'
        . $args->link_after
        . $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
    function end_el(&$output, $item, $depth) 
    {
        $output .= "</div>";
    }
}

I'm pretty sure the problem is that you aren't overiding end_el() so it's just doing its thing and inserting the closing li tag.

3
  • 1
    I am new to wordpress I think what your saying is add the function to the existing one and remove '</div> which I have tried with no luck still get trailing </li> i ahve tried Artful_dodgers suggestion and it is not good but its begining to take shape Nov 16, 2013 at 11:55
  • No, you don't add the function to the existing one, you but it below the existing one. I'll update my answer with the full code. Nov 16, 2013 at 12:37
  • When you extend a class (the way we're extending Walker_Nav_Menu) whatever functions you modify will be overridden, but the class may still contain many other functions and if you don't override them as well they will function as normal. For example, the Walker_Nav_Menu has the end_el() function. If you look at the source you'll see that this function is responsible for adding the closing </li> tag to each menu item. If you don't override this function it runs normally and does its job of adding the closing </li> tags. Nov 16, 2013 at 14:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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