how to change Wordpress menu markup/classes
-
19-02-2021 - |
Pregunta
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.
Solución
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.