Add sequential numbering for wordpress menu (only depth 0) - php

Question

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

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