custom walker to replace li with <a>

I m a bit new to WP

i want to use semantic UI Menu in wp_menu() of WordPress… how to achieve that.. Please guide.

Read More

this much i have achieved but how to change the li into or to remove the LI and than give class to so semantic ui menu can takes its shape

this is my output i want to remove the < DIV id=’menu-tem-8′ > and than give class = “item” to corresponding

    <div class="ui secondary  menu">
       <div id='menu-item-8'  class="menu-item menu-item-type-post_type menu-item-object-page">
            <a href="http://localhost/wordpress/lbs/">Home</a>
       </div>
   </li> 

   <div id='menu-item-11'  class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children">
        <a href="http://localhost/wordpress/lbs/company/">Company</a>
   </div>
   </li> 

   <div id='menu-item-27'  class="menu-item menu-item-type-post_type menu-item-object-page">
        <a  href="http://localhost/wordpress/lbs/services/">Services</a>
   </div>
   </li>

    <div id='menu-item-26'  class="menu-item menu-item-type-post_type menu-item-object-page">
            <a  href="http://localhost/wordpress/lbs/portfolio/">Portfolio</a>
    </div>
    </li> 

    <div id='menu-item-46'  class="menu-item menu-item-type-post_type menu-item-object-page">
            <a  href="http://localhost/wordpress/lbs/shop/">Shop</a>
    </div>
    </li> 

    </div>
    </div>

============================================================
Leo and James King: Thanx for your reply….

This is in function.php

// navigation walker

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 );
    }
}

this is in Header.php

                        wp_nav_menu(
                            array (
                                'menu' => 'top-menu',
                                'container' => 'div', // parent container 
                                'container_class' => 'ui secondary  menu', //parent container ID
                                'depth' => 1,
                                'menu_class' =>item,
                                'items_wrap' => '%3$s', // removes ul
                                'walker' => new Description_Walker // custom walker to replace li with div
                            )
                        );

            ?>

Related posts

1 comment

  1. Leo and James King: Thanx for your reply….

    actually what i want to achieved is this

    <div class="someclass"> // in place of <ul>
    <a class="item">Page Title</a>
    <a class="item">Page Title</a>
    <a class="item">Page Title</a>
    .
    .
    .
    </div>
    

    This is the patter which is used by semantic UI for horizontal menu

    I have achieved this much

    <div class="ui secondary  menu">
    <a href="http://localhost/wordpress/lbs/services/">Services</a>
    <a href="http://localhost/wordpress/lbs/portfolio/">Portfolio</a>
    <a href="http://localhost/wordpress/lbs/shop/">Shop</a>
    </div>
    

    by using code

          <div class="ui secondary  menu">
          <?php
          $menuParameters = array(
                    'menu' => 'top-menu',
                    'container'       => false,
                    'echo'            => false,
                    'items_wrap'      => '%3$s',
                    'depth'           => 0,
                  );
    
                  echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
          ?>
          </div>
    

    But i want to add

    class=”item”

    to

    <a href="http://localhost/wordpress/lbs/services/">Services</a>

    Please guide..

    thankx

Comments are closed.