I'm creating a custom walker for my nav menu. The goal is to split the menu in to columns like so:

enter image description here

I can easily determine where I am in the list by looking at $item->menu_order. What I don't know is how many items are in the menu total.

How can I figure that out from inside the walker?


I realize there are several other ways to create columns. All have their drawbacks, however:

  1. CSS Floats. As suggested below by @sagive, this could be accomplished by floating all of the list elements. The problem is that the list changes order. Instead of going down the first column, then wrapping over to the second, the list would go across all four columns on the first row, then across all four columns in the second row. This messes up the order.

  2. CSS Columns. This is almost the perfect solution. It will give me exactly what I want -- except that IE doesn't it at all. Even on IE 9. That makes it unusable for a mainstream web site.

  3. jQuery. With some client-side javascript I could hack up the list and make it layout the way I want. That's messy though, and it breaks for people who have js disabled.

  4. PHP. This is the method I'm asking about in this question. I break the list in to four separate unordered lists, dump each out in html, then use CSS to float the lists to make four distinct columns. It may be tricky to produce in PHP, but the result looks the same for all browsers. That makes it the best option I believe.


For those who may follow, here's the code I finally used to get the answer:

// The menu handle from the register_nav_menu statement in functions.php
$theme_location = 'my-menu-handle';

$theme_locations = get_nav_menu_locations();

$menu_obj = get_term( $theme_locations[$theme_location], 'nav_menu' );

// Echo count of items in menu
echo $menu_obj->count;

4 Answers 4


Call wp_get_nav_menu_object to get a menu object. The count will be one of the object properties, reference like so:


// Get menu object
$my_menu = wp_get_nav_menu_object( 'your-menu-name-or-slug' );

// Echo count of items in menu
echo $my_menu->count;

Also to further answer the additional question in the comments regarding getting all top level menu items. Given that menus are a post type with meta keys, it is possible to call wp_get_nav_menu_items with meta_key and meta_value args and get only top level menus, like so.


$args = array( 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => 0 );

$top_items = wp_get_nav_menu_items( 'mymenuname', $args );

Hope that helps.

  • Thank you! That didn't get me exactly what I wanted, but it was close enough to help me find the answer. The problem was that I don't know the menu name or slug, only the theme name set in the register_nav_menu statement. I did find some code to determine the menu name however. With that in hand, I could use your code above.
    – Axeva
    Commented Dec 3, 2011 at 15:40
  • Ah... you didn't state that in your question, had you done so i'd have probably chucked in some more code to figure out the menu name to. Happy to have helped in any case.. ;)
    – t31os
    Commented Dec 3, 2011 at 16:24
  • Is it possible to filter this somehow to count only top level menu items and ignore submenus and submenu items?
    – Usce
    Commented Nov 12, 2018 at 0:07

Why not just use the function array_chunk() ?

Assuming you built out an array of finished <li> tags, your code to split and display them might look like this:

$columns = array_chunk( $myArray, 4 );
foreach ( $columns as $column ) {
    echo '<li>' . $column . '</ul>';

I know you already found a solution and don't know if that's exactly what you're searching for, but I wrote a plugin a while ago to use in a client's site and it creates classes for every menu, sub-menu and menu item. It's called Advanced Navigation Menus. If you end up using it feel free to send me feature requests.


Dont you think (and sorry if i am rude) that its much simpler and easier
to just float:left; all the "li" and put them inside a div with that
structure backgroung as an image??


<style type="text/css">
.fourPartMenu {

    border: 1px solid #444;
    width: 800px;
    padding: 10px 15px;

.fourPartMenu ul {
    list-style: circle; // replace with your img
    padding: 0px;
    margin: 0px;

.fourPartMenu ul li {
    float: left;
    width: 190px;


<div class="fourPartMenu">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
        <li><a href="#">Five</a></li>
        <li><a href="#">Six</a></li>
        <li><a href="#">Seven</a></li>
        <li><a href="#">Eight</a></li>
        <li><a href="#">Nine</a></li>
        <li><a href="#">Ten</a></li>

I think that would be much easier to implement - but.. i know that not exatcly what your after tough a fresh view sometimes help :)

  • Thanks for the answer. I realize I could do it with CSS, but the list will be out of order. Going across the columns you would get one, two, three, four at the top. What I need is one, four, seven, nine. In other words, the list goes down the first column, then down the second column, and so on.
    – Axeva
    Commented Dec 3, 2011 at 14:16

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.