0

How to create Wordpress Menu with custom HTML structure using

<?php wp_nav_menu( array( 'theme_location' => 'global-menu' ) ); ?>

Output HTML should look like below:

<nav>
   <a href="" class="item-link item-dynamic-class-1">Item 1</a>
   <a href="" class="item-link item-dynamic-class-2">Item 2</a>
   <a href="" class="item-link item-dynamic-class-3">Item 3</a>
   <a href="" class="item-link item-dynamic-class-4">Item 4</a>
</nav>

I want item-dynamic-class-x to be dynamically set from Wordpress Menu Editor (CSS Classes input field). If filled, then add class to anchor. If not, then just static item-link class should appear.

1 Answer 1

1

Try with below code

wp_nav_menu(
 array (
    'menu'            => 'main-menu',
    'container'       => '',// or false
    'container_id'    => FALSE,
    'menu_class'      => '',
    'menu_id'         => FALSE,
    'items_wrap'    => '%3$s',
    'depth'           => 1,
    'walker'          => new Description_Walker
 )
);

Put below code in your active functions.php

class Description_Walker extends Walker_Nav_Menu
{
    /**
     * Start the element output.
     *
     * @param  string $output Passed by reference. Used to append additional content.
     * @param  object $item   Menu item data object.
     * @param  int $depth     Depth of menu item. May be used for padding.
     * @param  array|object $args    Additional strings. Actually always an 
     * @return void
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
    {
        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;

        $class_names = join(
            ' '
        ,   apply_filters(
                'nav_menu_css_class'
            ,   array_filter( $classes ), $item
            )
        );

        ! empty ( $class_names )
            and $class_names = ' class="'. esc_attr( $class_names ) . '"';



        $attributes  = '';

        ! empty( $item->attr_title )
            and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
        ! empty( $item->target )
            and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
        ! empty( $item->xfn )
            and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
        ! empty( $item->url )
            and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';

        // insert description for top level elements only
        // you may change this
        $description = ( ! empty ( $item->description ) and 0 == $depth )
            ? '<small class="nav_desc">' . esc_attr( $item->description ) . '</small>' : '';

        $title = apply_filters( 'the_title', $item->title, $item->ID );

        $item_output = $args->before
            . "<a $attributes>"
            . $args->link_before
            . $title
            . '</a> '
            . $args->link_after
            . $description
            . $args->after;

        // Since $output is called by reference we don't need to return anything.
        $output .= apply_filters(
            'walker_nav_menu_start_el'
        ,   $item_output
        ,   $item
        ,   $depth
        ,   $args
        );
    }
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.