Get Each Menu Nav Label of Menus in HTML tag

I have footer menus built with wp_nav_menu using code below:

wp_nav_menu(
   array(
        'container'      => '',
        'depth'          => 1,
        'items_wrap'     => '%3$s',
        'theme_location' => 'footer',
        'link_before'    => '<span content="">',
        'link_after'     => '</span>',
   )
);

and the HTML output like the following:

<ul class="footer-menus">
   <li id="1"><a title="A" href="https://localhost/A/"><span content=""></span>A</a></li>
   <li id="2"><a title="B" href="https://localhost/B/"><span content=""></span>B</a></li>
   <li id="3"><a title="C" href="https://localhost/C/"><span content=""></span>C</a></li>
</ul>

the question is how to fill the tag <span content where the content tag is the menu nav label that same with the li tag have, so the HTML output will be like this:

<ul class="footer-menus">
   <li id="1"><a title="A" href="https://localhost/A/"><span content="A"></span>A</a></li>
   <li id="2"><a title="B" href="https://localhost/B/"><span content="B"></span>B</a></li>
   <li id="3"><a title="C" href="https://localhost/C/"><span content="C"></span>C</a></li>
</ul>

Any help appreciated. Thanks!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Add This code in functions.php file

class WP_Custom_Nav_Walker extends Walker_Nav_Menu {

    public function start_el(&$output, $item, $depth = 0, $args = array (), $id = 0) {
        $indent = ( $depth ) ? str_repeat ( "t", $depth ) : '';

        $classes   = empty ( $item->classes ) ? array () : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join ( ' ', apply_filters ( 'nav_menu_css_class', array_filter ( $classes ), $item, $args, $depth ) );
        $class_names = $class_names ? ' class="' . esc_attr ( $class_names ) . '"' : '';

        $id = apply_filters ( 'nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args, $depth );
        $id = $id ? ' id="' . esc_attr ( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $class_names . '>';

        $atts           = array ();
        $atts[ 'title' ]  = ! empty ( $item->attr_title ) ? $item->attr_title : '';
        $atts[ 'target' ] = ! empty ( $item->target ) ? $item->target : '';
        $atts[ 'rel' ]    = ! empty ( $item->xfn ) ? $item->xfn : '';
        $atts[ 'href' ]   = ! empty ( $item->url ) ? $item->url : '';

        $atts = apply_filters ( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if( ! empty ( $value ) ) {
                $value      = ( 'href' === $attr ) ? esc_url ( $value ) : esc_attr ( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        /** This filter is documented in wp-includes/post-template.php */
        // YOUR ADDED CONTROL STARTS HERE!!
        if( $args->link_before === 'span' ) {
            $item_output .= '<span content="'.$item->title.'"></span>';
        }
        $item_output .= apply_filters ( 'the_title', $item->title, $item->ID ) . $args->link_after;
        // YOUR ADDED CONTROL ENDS HERE!!


        $item_output .= '</a>';
        $item_output .= $args->after;

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

}

menu should be like this

wp_nav_menu(
   array(
        'menu_class'     => 'nav-menu',
        'container'      => '',
        'depth'          => 1,
        'items_wrap'     => '%3$s',
        'theme_location' => 'footer',
        'walker'         => new WP_Custom_Nav_Walker(),
        'link_before'    => 'span',
   )
);

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0