3

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?

4

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*'
 ) );
4

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

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

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.

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.