Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have used theme twenty thirteen a my base theme and Have tried used code from http://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

share|improve this question
1  
What have you tried? File an edit and show your code please. –  kaiser Nov 13 '13 at 21:03
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? –  Charles Clarkson Nov 14 '13 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 –  user2033464 Nov 14 '13 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 –  user2033464 Nov 14 '13 at 18:00

2 Answers 2

up vote 0 down vote accepted

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 ?

share|improve this answer
    
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 –  user2033464 Nov 16 '13 at 11:48

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.

share|improve this answer
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 –  user2033464 Nov 16 '13 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. –  George Kendros Nov 16 '13 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. –  George Kendros Nov 16 '13 at 14:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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