CODEWITHSUNDEEP
htmlwordpressmenu
sajran
sajran

Reputation: 317

Creating custom HTML structure of WordPress menu

I've read many articles and WordPress Codex pages but still can't understand it. I want to create menu with really simple HTML structure, like this:

<nav class="nav">
    <ul class="list">
        <li class="item"><a class="link--active" href="#">Link 1</a></li>
        <li class="item"><a class="link" href="#">Link 2</a></li>
        <li class="item"><a class="link" href="#">Link 3</a></li>
    </ul>
</nav>

The most important thing for me is ability to assign my custom classes to every element. I saw very complicated examples using WP Walker class and tried to simplify them but it didn't work. I'm sure it's pretty easy for person who knows WordPress well, so please help me.

P.S. Sorry for my English, it's not my native language.

Upvotes: 0

Views: 3400

Answers (2)

Shuhad zaman
Shuhad zaman

Reputation: 3390

add this function on your function

function wp_get_menu_array($current_menu) {
    $menu_name = $current_menu;
    $locations = get_nav_menu_locations();
    $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
    $array_menu = wp_get_nav_menu_items( $menu->term_id); 
    $menu = array();
    foreach ($array_menu as $m) {
        if (empty($m->menu_item_parent)) {
            $menu[$m->ID] = array();
            $menu[$m->ID]['ID']      =   $m->ID;
            $menu[$m->ID]['title']       =   $m->title;
            $menu[$m->ID]['url']         =   $m->url;
            $menu[$m->ID]['children']    =   array();
        }
    }
    $submenu = array();
    foreach ($array_menu as $m) {
        if ($m->menu_item_parent) {
            $submenu[$m->ID] = array();
            $submenu[$m->ID]['ID']       =   $m->ID;
            $submenu[$m->ID]['title']    =   $m->title;
            $submenu[$m->ID]['url']  =   $m->url;
            $menu[$m->menu_item_parent]['children'][$m->ID] = $submenu[$m->ID];
        }
    }
    return $menu;
}

call it on your view by

<div class="row">
    <?php
                $menu_items = wp_get_menu_array('your_menu_name');
                foreach ($menu_items as $item) : ?>
                    <div class="col-md-3">
                      <strong><?= $item['title'] ?></strong>
                      <?php if( !empty($item['children']) ):?>
                      <ul>
                        <?php foreach($item['children'] as $child): ?>
                          <li>
                            <a href="<?= $child['url'] ?>" title="<?= $child['title'] ?>"><?= $child['title'] ?></a>
                          </li>
                        <?php endforeach; ?>
                      </ul>
                      <?php endif; ?>
                    </div>
                  <?php endforeach; ?>  
</div>

this gives you two level menu. you can customize html structure anyway you want.

Upvotes: 1

Cedon
Cedon

Reputation: 627

You would need to use the wp_nav_menu function.

To output the HTML you listed above, you would need to pass it the following:

<?php wp_nav_menu( array(
   'menu' => 'Your Name for Menu',
   'container' => 'nav',
   'container_class' => 'nav',
   'menu_class' => 'list'
 )); ?>

As for the list item and link classes, you may want to look at the default ones WordPress puts in on its own to see if those will suit your needs.

As for adding the active class to the link, try the following code:

add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );

function add_active_class($classes, $item) {

    if( in_array( 'current-menu-item', $classes ) ||
    in_array( 'current-menu-ancestor', $classes ) ||
    in_array( 'current-menu-parent', $classes ) ||
    in_array( 'current_page_parent', $classes ) ||
    in_array( 'current_page_ancestor', $classes )
) {
    $classes[] = "active";
   }
   return $classes;
}

Please note that this is not my code, but rather a snippet I saved from https://wordpress.stackexchange.com/questions/112955/add-class-to-active-element-and-its-parent-in-nav-menu that I bookmarked when looking for the same thing without having to use JavaScript.

Upvotes: 0

Related Questions