How to count nav menu items?

3 Views

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

Read More

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?

Updated:

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.

Solution:

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;
Post Views: 3

Related posts

Leave a Reply

4 comments

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

    Example:

    // 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.

    Example:

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

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

    Hope that helps.

  2. 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>';
}

  3. 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.

  4. 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??

    Example:

    <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;
}

</style>

<div class="fourPartMenu">
    <ul>
        <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>
    </ul>
</div>

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