1

I’m building my first website on WordPress, and i wanted to ask is someone know how to change markup in Wordpress menu. Basically I want the markup of my WordPress navigation to match what I’ve done in my static templates.

<div class="topNav">
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Mes siūlome</a></li>
          <li class="dropdown">
            <a class="dropbtn">if Has subMenu</a>
            <div class="dropdown-content">
              <a href="#"> Sub1</a>
              <a href="#"> Sub2</a>
              <a href="#"> Sub3</a>
            </div>
          </li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>

However, i getting something like this

<div class="menu-topnav-container">
   <ul id="menu-topnav" class="menu">
      <li id="menu-item-89" class="some random wordpress classes">
         <a href="#">about</a>
         <ul class="sub-menu">
            <li id="menu-item-90" class="some random wordpress classes"><a 
               href="http://test">example</a></li>
         </ul>
      </li>
      <li id="menu-item-92" class="some random wordpress classes"><a 
         href="http://2">example</a></li>
   </ul>
</div>

I know i need to use a custom walker class however i don't know how to apply it. :( can someone help me with this. I need this markup structure because i don't want to rewrite all css code.

  • 1
    Hi. Welcome to WPSE. You can modify the menu items by the walker class, but your templates menu structure isn't that different than WordPress's. Can't you simply use CSS to style it the same way? – Jack Johansson Jun 15 '17 at 14:50
2

Changing the CSS is the simplest way to apply your desired styles.

Another alternative, as Jack mentioned, is to create a custom walker. The Codex has a good overview.

The third option is a happy medium - you can customize the menu partially just with your wp_nav_menu() call. For example, this call

wp_nav_menu(array(
    'menu' => 'myMenu', // change this to call your desired menu
    'container_class' => 'topNav', // changes outer <div> class
    'items_wrap' => '<ul>%1$s</ul>' // strips id & class from <ul>
));

will give you this output:

<div class="topNav">
   <ul>
      <li id="menu-item-89" class="some random wordpress classes">
         <a href="#">about</a>
         <ul class="sub-menu">
            <li id="menu-item-90" class="some random wordpress classes"><a 
               href="http://test">example</a></li>
         </ul>
      </li>
      <li id="menu-item-92" class="some random wordpress classes"><a 
         href="http://2">example</a></li>
   </ul>
</div>

so there's less CSS to change, but you also don't have to build an entire Walker.

  • I wanted to know if Is there another way than just changing css. Thanks for fast and informative answer. I used third option. You're really helpful :) – Eiwa Jun 15 '17 at 20:12
  • Glad it helped. Sounds like a good time to mark this as the answer :) – WebElaine Jun 15 '17 at 20:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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