menu in Wordpress with 3 levels

Question

I want to build a menu in Wordpress with 3 levels.

This example has 2 levels, the father and the son.

I want the menu to have one more level, so I can create a 3-level menu with Wordpress.

Below, on the left, a code that refers to two menu levels.

Example of the menu in this Link

<?php
  $menu_name = 'main_nav';
  $locations = get_nav_menu_locations();
  $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
  $menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );
?>

<nav>
<ul class="main-nav">
    <?php
    $count = 0;
    $submenu = false;
    foreach( $menuitems as $item ):
        $link = $item->url;
        $title = $item->title;
        // item does not have a parent so menu_item_parent equals 0 (false)
        if ( !$item->menu_item_parent ):
        // save this id for later comparison with sub-menu items
        $parent_id = $item->ID;
    ?>

    <li class="item">
        <a href="<?php echo $link; ?>" class="title">
            <?php echo $title; ?>
        </a>
    <?php endif; ?>

        <?php if ( $parent_id == $item->menu_item_parent ): ?>

            <?php if ( !$submenu ): $submenu = true; ?>
            <ul class="sub-menu">
            <?php endif; ?>

                <li class="item">
                    <a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
                </li>

            <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>
            </ul>
            <?php $submenu = false; endif; ?>

        <?php endif; ?>

    <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
    </li>                           
    <?php $submenu = false; endif; ?>

<?php $count++; endforeach; ?>

</ul>
</nav>

Answer 1

Wordpress does not have a simple function ready to create 3-level submenus. But with this class I created it allows you to create a 3 level menu easily.

The class file can be saved as menu.php or the name you want.

Remembering that it will be necessary to change the name of the menu according to the name of your menu used, otherwise you will not be able to fetch the data from the menu.

$menu_name = 'header-menu';

This class will serve as a kind of Wordpress back end to be able to create a menu of 3 levels.

<?php
// classe com as variáveis que você quer puxar do back end
class Menu
{
    public $titulo;
    public $id;
    public $url;
    public $submenu;
}

$menu_name = 'header-menu';
$locations = get_nav_menu_locations();
$menu = wp_get_nav_menu_object($locations[ $menu_name ]);
$menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
$submenu = false;
$id_anterior = 0;
$set_menu = false;
foreach( $menuitems as $item ):

    //adiciona o menu
    if (!$item->menu_item_parent){
        // o menu precisa ser adicionado depois de setar seus filhos logo 
        //a variavel setmenu vai certificar que você consiga setar os 
        //filhos do menu corretamente
        if ($set_menu == true) { $menus[] = $myMenu;  $set_menu = false;}
        if ($set_menu == false) { $set_menu = true;}

        $myMenu = new Menu();
        $myMenu->titulo = $item->title;
        $myMenu->id = $item->ID;
        $myMenu->url = $item->url;
    } 
    else 
    { 
        //adiciona o submenu
        if ($id_anterior != $item->menu_item_parent) { 
            $mySubmenu = new Menu();
            $mySubmenu->titulo = $item->title;
            $mySubmenu->id = $item->ID;
            $mySubmenu->url = $item->url;
            $myMenu->submenu[] = $mySubmenu; 
        }
        //adiciona o submenu

        //adiciona o subsubmenu
        if ($id_anterior == $item->menu_item_parent) { 
            $mySubSubmenu = new Menu();
            $mySubSubmenu->titulo = $item->title;
            $mySubSubmenu->id = $item->ID;
            $mySubSubmenu->url =  $item->url;
            $mySubmenu->submenu[] = $mySubSubmenu; 
        }
        if ($id_anterior != $item->menu_item_parent){
            $id_anterior = $item->ID; 
        }
        //adiciona o subsubmenu
    }  
endforeach; 
//necessário para adicionar o último ítem do menu
$menus[] = $myMenu;
?>

How to use code in front end after you have done the class?

First you should give a include or require_once or some similar wordpress template creation function to include the class, in the example I put the require_once();

<?php require_once (TEMPLATEPATH . '/menu.php'); ?>

After the creation of the menu will be easy, you can make any type of menu customized with 3 levels with this class, just apply the logic of the menu, in case I put a simple example using the tags "UL" "LI" and "A"

<ul>
<?php foreach ($menus as $menu) { ?>
    <li>
        <a href="<?= $menu->url; ?>">
            <?= $menu->titulo; ?> 
        </a>
    </li>

    <!-- se houver submenu -->
    <?php if ($menu->submenu){ ?>
    <ul>
        <?php foreach ($menu->submenu as $submenu) { ?>

            <li>
                <a href="<?= $submenu->url; ?>">
                    <?= $submenu->titulo; ?> 
                </a> 
            </li>

            <!-- se for menu de terceiro nível -->
            <?php if ($submenu->submenu){ ?>
                <ul>
                    <?php foreach ($submenu->submenu as $submenu) { ?>
                        <li>
                            <a href="<?= $submenu->url; ?>">
                                <?= $submenu->titulo; ?> 
                            </a> 
                        </li>  
                    <?php } ?>
                </ul>           
            <?php } ?>
            <!-- se for menu de terceiro nível -->  

        <?php } ?>
    </ul>          
    <?php } ?>
    <!-- se houver submenu -->

<?php } ?>

Upshot:

So when you can work with 3-level menu with Wordpress admin panel and apply in your custom menu easily, as shown in the example.