Asad Ali Khan
Asad Ali Khan

Reputation: 307

howto create Walker to change <LI> to <a> and give class to <a>

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

Finally I able to do this..

              <div id="menu1" class="ui secondary  menu">                                    
                   <?php
                      $menuParameters = array(
                                'menu' => 'top-menu',
                                'menu_class' => 'item',
                                'container'       => false,
                                'echo'            => false,
                                'items_wrap'      => '%3$s',
                                'depth'           => 0,
                              );
                              echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
                   ?>
              </div>
  <script>
    jQuery( "#menu1 a" ).addClass( "item" );
</script>

Upvotes: 1

Views: 310

Answers (3)

Asad Ali Khan
Asad Ali Khan

Reputation: 307

Thankx Fermolina for your answer unfortunately it give me this output which dosent work

Code use

           <div class="ui secondary menu">
  <?php
  $menuParameters = array(
            'menu' => 'test-menu',
            'menu_class' => 'item',
            'container'       => false,
            'echo'            => false,
            'items_wrap'      => '%3$s',
            'depth'           => 0,
          );

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

OUTPUT no class in

           <div class="ui secondary menu">
  <a href="http://localhost/wordpress/lbs/">Home</a>
  </div>

Upvotes: 1

luukvhoudt
luukvhoudt

Reputation: 2002

Read the codex about function wp_nav_menu, you're using it wrong, do something like this:

echo strip_tags(wp_nav_menu(
   'items_wrap' => '<div id="%1$s" class="%2$s">%3$s</div>',
   'menu_class' => 'myclass ui',
   'echo' => false,
), '<a>');

In wordpress admin > appereance > menus, you can define classes for each link. Just make sure you've turned it on at the screen options.

But you can also do something like this to add a class.

Upvotes: 1

Ferrmolina
Ferrmolina

Reputation: 2771

You can use 'menu_class'=> 'item'

Example:

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

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

Upvotes: 1

Related Questions