0

I've searched for hours and cannot come up with what I thought would be a simple thing. I am building my very first Wordpress site locally. I'm making a function for my functions.php file based on this howto but I need it to have submenus. I have created a custom menu inside Wordpress with 2 levels.

I need to add HTML code (not a CSS class) to an item if it is a parent item.

Bonus points if you can tell me how people know what attributes/properties are available to a menu item (such as title and url) - I can't find a reference to that anywhere!

Here is my current code, which is currently displaying all menu items as top-level items.

function clean_custom_main_menu() {
    $menu_name = 'main-menu'; // specify custom menu slug
    $menu_list = '<ul id="menu">' ."\n";

    if ($menu_items = wp_get_nav_menu_items($menu_name)) { 
        $count = 0;
        $submenu = false;

        foreach ((array) $menu_items as $key => $menu_item) {
            $title = $menu_item->title;
            $url = $menu_item->url;
            $classes = $menu_item->classes; // does not work
            $has_children = $menu_item->has_children;  //does not work
            $parent_id = 0;

            // check if this item is a parent item with children
            //if ( $menu_item->menu_item_parent && $menu_item->menu_item_parent > 0 ) {
            //if(in_array('menu-item-has-children', $classes)){
            if ($has_children) {
                $parent_id = $menu_item->ID;
            }
            // if this item has a parent ID, it's a second-level item
            if ($parent_id != 0 && $parent_id == $menu_item->menu_item_parent ) {
               $submenu = true;
            }

            if (!$has_children) {
               // if this item has no submenu, write top-level code
                $menu_list .= "\t". '<li><a href="'. $url .'">'. $title .'</a></li>' ."\n";
            }
            // the "else" is not currently being hit
            //else {
            //    $menu_list .= "\t" . '<li><a href="#">' . $title . '<span class="arrow-down"></span></a></li>' . "\n";
           //    $menu_list .= '<ul class="sub">';
            //    // foreach (child) do children
            //    $menu_list .= '</ul>';
            //    $menu_list .= '</li>';
            //}
        }
    } else {
         $menu_list .= '<!-- no list defined -->';
    }
    $menu_list .= "\t". '</ul>' ."\n";
    echo $menu_list;
}

Desired output:

 <ul id="menu">
  <li><a href="#">Home</a></li>
  <li>
    <a href="#">About <span class="arrow-down"></span></a>
    <ul class="sub">
        <li><a href="/about/services.html">Our Services</a></li>
        <li><a href="/about/what-we-do.html">What We Do</a></li>
    </ul>
 </li>
 <li>
    <a href="/top-level-item/">Top-Level Item</a>
 </li>
 <li><a href="#">Top-Level Item with Children <span class="arrow-down"></span></a>
    <ul class="sub">
        <li><a href="/top-level-item2/item1">Sub Item 1</a></li>
        <li><a href="/top-level-item2/item2">Sub Item 2</a></li>
        <li><a href="/top-level-item2/item3">Sub Item 3</a></li>
        <li><a href="/top-level-item2/item4">Sub Item 4</a></li>
    </ul>
 </li>
 <li><a href="/contact/">Contact</a></li>
</ul>

Please note: I do not want to use walkers. I am certain it can be done somehow since I had this working at one point, but lost everything when Wordpress decided to update the theme I made - to a totally different one from web-land, erasing all my files. D'oh!

2 Answers 2

4

It turns out that people have contributed how to build items with submenus right on the Wordpress documentation for the function I was using, wp_get_nav_menu_items(). Those got me started but they weren't exactly quite right, since I had the extra span tags and wanted to close my A tags in different places, but I was able to ultimately get things working. Here is my final code based on those comments:

function clean_custom_main_menu() {
    $menu_name = 'main-menu'; // specify custom menu slug
    $menu_list = '<ul id="menu">' ."\n";

    if ($menu_items = wp_get_nav_menu_items($menu_name)) { 
        $count = 0;
        $submenu = false;
        $parent_id = 0;
        $previous_item_has_submenu = false;

        foreach ((array) $menu_items as $key => $menu_item) {
            $title = $menu_item->title;
            $url = $menu_item->url;

            // check if it's a top-level item
            if ($menu_item->menu_item_parent == 0) {
                $parent_id = $menu_item->ID;
               // write the item but DON'T close the A or LI until we know if it has children!
                $menu_list .= "\t". '<li><a href="'. $url .'">'. $title;
            }

            // if this item has a (nonzero) parent ID, it's a second-level (child) item
            else {
                if ( !$submenu ) { // first item
                    // add the dropdown arrow to the parent
                    $menu_list .= '<span class="arrow-down"></span></a>' . "\n";
                    // start the child list
                    $submenu = true;
                    $previous_item_has_submenu = true;
                    $menu_list .= "\t\t" . '<ul class="sub">' ."\n";
               }

                $menu_list .= "\t\t\t" . '<li>';
                $menu_list .= '<a href="'.$url.'" class="title">'.$title.'</a>';
                $menu_list .= '</li>' ."\n";

                // if it's the last child, close the submenu code
                if ( $menu_items[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ){
                    $menu_list .= "\t\t" . '</ul></li>' ."\n";
                    $submenu = false;
                }
            }

            // close the parent (top-level) item
            if (empty($menu_items[$count + 1]) || $menu_items[ $count + 1 ]->menu_item_parent != $parent_id )
            {
               if ($previous_item_has_submenu)
                {
                    // the a link and list item were already closed
                    $previous_item_has_submenu = false; //reset
                }
                else {
                    // close a link and list item
                    $menu_list .= "\t" . '</a></li>' . "\n";
                }
            }

            $count++;
        }
    } else {
         $menu_list .= '<!-- no list defined -->';
    }
    $menu_list .= "\t". '</ul>' ."\n";
    echo $menu_list;
}
0
0

API

Try doing var_dump( $menu_items ) and you'll see that the menu items are posts of post_type "nav_menu_item" so they have the same api as post.

Count Children

https://wordpress.stackexchange.com/questions/9374/get-the-post-children-count-of-a-post shows a way of accessing child post count using $wpdb. You could do this with get_posts by setting the parent_id to the parent item and post_type to nav_menu_item and then count the results.

Classes

The post object has a classes array. Since this wasn't working for you, I'd double check how you are trying to access/use that array and if that doesn't help, try investigating the walker functions for help with your custom implementation.

1
  • Thanks for the reply. The object does have a classes array, but it is always empty. I was trying to do if(in_array('menu-item-has-children', $item->classes) && $depth != 0), but since the array was empty it didn't work. The var_dump was very enlightening. The parent objects have no awareness of their children, but the children know about their parent. I will try to work on this again tomorrow and let you know how it goes.
    – lchras
    Commented Jan 3, 2018 at 2:00

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.