Add sequential numbering for wordpress menu (only depth 0)

1 Views

I am trying to add sequential numbering after each link in a menu in wordpress. They should be in tag and as a text. so i can style.

Tried this one below but since its CSS, I can’t style those numbers.

Read More

How to add sequential numbering for wordpress menu

I’ve got no knowledge of JS. so I did this in navwalker.php 

            if(! empty( $item->attr_title )){
            $item_output .= '<a'. $attributes .'><i class="' . esc_attr( $item->attr_title ) . '"></i>&nbsp;';
        } else {
            $item_output .= '<a'. $attributes .'>';
        }
        
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= ($args->has_children && $depth == 0) ? ' <span class="caret"></span></a>' : '</a>';
        $item_output .= $args->after . '<span class="navnum">' . str_pad(esc_attr( $item->menu_order ), 2, "0", STR_PAD_LEFT) . '.</span>';

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

And it works.
Only problem it counts childs (submenus) in a collapsable menu, so it creates something like this: 

01
03
04
07
08

Any idea about how to number only parents?

(If solution is JS I would appreciate if you explain it very simple)

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. If what you are trying to do is number only the top-level menu, you can just test for depth.

    Change:

        $item_output .= $args->after . '<span class="navnum">' . str_pad(esc_attr( $item->menu_order ), 2, "0", STR_PAD_LEFT) . '.</span>';

    to: 

        $item_output .= $args->after . ($depth == 0 ? '<span class="navnum">' . str_pad(esc_attr( $item->menu_order ), 2, "0", STR_PAD_LEFT) : '') . '.</span>';

    To number the menu items sequentially, set up your own global counter when a new level starts:

    public function start_lvl( &$output, $depth = 0, $args = array() ) {
    if (!isset($_GLOBALS['menu_counter'])) {
        $GLOBALS['menu_counter'] = array();
    }
    $GLOBALS['menu_counter'][$depth] = 0;
    $indent = str_repeat("t", $depth);
    $output .= "n$indent<ul class="sub-menu">n";
}

    Then in start_el:

    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    global $menu_counter;
    ....

    and in the code example you gave in your question:

    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= ($args->has_children && $depth == 0) ? ' <span class="caret"></span></a>' : '</a>';
$item_output .= $args->after . '<span class="navnum">' . str_pad(++$menu_order[$depth], 2, "0", STR_PAD_LEFT) . '.</span>';

    What this does is set a variable, starting at zero, when you set a new level. Then, for each item at that level, it adds one to that variable and uses the result as the number of the menu item.