5

I've been learning to convert HTML to WordPress and want to convert on to class like this:

<div class="mainmenu pull-left">
    <ul class="nav navbar-nav collapse navbar-collapse">
        <li><a href="index.html" class="active">Home</a></li>
        <li class="dropdown"><a href="#">Shop<i class="fa fa-angle-down"></i></a>
            <ul role="menu" class="sub-menu">
                <li><a href="shop.html">Products</a></li>
                <li><a href="product-details.html">Product Details</a></li> 
                <li><a href="checkout.html">Checkout</a></li> 
                <li><a href="cart.html">Cart</a></li> 
                <li><a href="login.html">Login</a></li> 
            </ul>
        </li> 
        <li class="dropdown"><a href="#">Blog<i class="fa fa-angle-down"></i></a>
            <ul role="menu" class="sub-menu">
                <li><a href="blog.html">Blog List</a></li>
                <li><a href="blog-single.html">Blog Single</a></li>
            </ul>
        </li> 
        <li><a href="404.html">404</a></li>
        <li><a href="contact-us.html">Contact</a></li>
    </ul>
</div>

This what I've done:

if ( ! function_exists( 'mytheme_setup' ) ) :
    function wpflex_setup() {  
        register_nav_menus( array(
            'primary' => 'Primary Menu'
        ) );
    }
endif;

wp_nav_menu( array( 
    'theme_location' => 'top-menu',
    'container'      => '',
    'menu_class'     => 'mainmenu pull-left',
) );

How to add class for ul?

5 Answers 5

5

You already did it the right way. If you take a look in the Documentation for wp_nav_menu, you'll see that menu_class is the right option for the UL's class:

wp_nav_menu( array(
    'theme_location' => 'top-menu',
    'container' => '',
    'menu_class'=> 'mainmenu pull-left *add-your-class-here*'
 ) );
1
  • 4
    Don't forget 'container' => 'ul', Commented Aug 30, 2016 at 14:12
5

It's simple just you need to add items_wrap parameter and add or edit class attr:

wp_nav_menu( array(
    'theme_location' => 'top-menu',
    'container' => false,
    'items_wrap' => '<ul class="nav your_custom_class">%3$s</ul>',
));
1

Wordpress creates the default page menu different from the active menus -- those which you create and assign in the backend. There is no direct way to add classes to the UL in page menus, but there are other ways. Try adding this to your functions.php

function add_id_and_classes_to_page_menu( $ulclass ) {
  return preg_replace( '/<ul>/', '<ul id="main-menu" class="nav navbar-nav collapse navbar-collapse">', $ulclass, 1 );
}
add_filter( 'wp_page_menu', 'add_id_and_classes_to_page_menu' );

Keep in mind this will replace any existing id and classes, thus I re-added them in the above example. I also added an id="main-menu" for completion.

1
  • Dirty, but this was the only way I could get it to do what I wanted to do. Thanks! Commented Sep 28, 2021 at 21:39
1

Here is your fixed code. I have tested it add class to ul

wp_nav_menu( array( 
    'theme_location' => 'top-menu',
    'container'      => 'ul',
    'menu_class'     => 'mainmenu pull-left',
) );
1
       <?php 
         wp_nav_menu( array('menu' => 'Main Menu' ,
        'menu_class' => 'nav navbar-nav',
         'container' => ''));
            ?>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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