0

I'm trying to improve my learning WordPress is very new, and the first theme. My problem is,

With the function "wp_nav_menu" into the "ul" tag,

data-hover = "dropdown" data-animations = "zoomIn zoomIn zoomIn zoomIn"

I want to add html attributes, how can I do that ?,

My aim is to make a hover dropdown menu.

I've added pictures and source code below.

Thank you very much in advance for your help.

enter image description here

enter image description here

0

wp_nav_menu has all the documentation written there.

You just need to put "ul" in the parameter "container".

So your modified function call will be,

wp_nav_menu( array(
    'theme_location' => 'main-menu',
    'container => 'ul',
    'container_id' => '', // put id of ul if needed
    'menu_class' => '' // as needed
) );

For custom attributes you need to use Walker class, as you have used in your function,

wp_nav_menu( array(
    'theme_location' => 'main-menu',
    'container => 'ul',
    'container_id' => '', // put id of ul if needed
    'walker' => new MainMenu_Walker()
) );

Then write the custom walker class for you menu,

/**
 * Custom walker class.
 */
class MainMenu_Walker extends Walker_Nav_Menu {

    /**
     * Starts the list before the elements are added.
     *
     * Adds classes to the unordered list sub-menus.
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int    $depth  Depth of menu item. Used for padding.
     * @param array  $args   An array of arguments. @see wp_nav_menu()
     */
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        // Depth-dependent classes.
        $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
        $display_depth = ( $depth + 1); // because it counts the first submenu as 0
        $classes = array(
            'sub-menu',
            ( $display_depth % 2  ? 'menu-odd' : 'menu-even' ),
            ( $display_depth >=2 ? 'sub-sub-menu' : '' ),
            'menu-depth-' . $display_depth
        );
        $class_names = implode( ' ', $classes );

        // Build HTML for output.
        $output .= "\n" . $indent . '<ul class="' . $class_names . '" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn">' . "\n";
    }

    /**
     * Start the element output.
     *
     * Adds main/sub-classes to the list items and links.
     *
     * @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. Used for padding.
     * @param array  $args   An array of arguments. @see wp_nav_menu()
     * @param int    $id     Current item ID.
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        global $wp_query;
        $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent

        // Depth-dependent classes.
        $depth_classes = array(
            ( $depth == 0 ? 'main-menu-item' : 'sub-menu-item' ),
            ( $depth >=2 ? 'sub-sub-menu-item' : '' ),
            ( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ),
            'menu-item-depth-' . $depth
        );
        $depth_class_names = esc_attr( implode( ' ', $depth_classes ) );

        // Passed classes.
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );

        // Build HTML.
        $output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">';

        // Link attributes.
        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
        $attributes .= ' class="menu-link ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';

        // Build HTML output and pass through the proper filter.
        $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
            $args->before,
            $attributes,
            $args->link_before,
            apply_filters( 'the_title', $item->title, $item->ID ),
            $args->link_after,
            $args->after
        );
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

I have added your html attributes to the inside start_lvl function. You can debug this code and modify as you need it.

I have taken this code from WordPress Menu Custom Walker Class

2
  • I don't think the asker is asking how to change the container tag, but rather how to add HTML attributes to it. aka data-hover="...", an example on how to add say data-example="foobar" would do this
    – Tom J Nowell
    Apr 21 '17 at 13:02
  • 1
    @TomJNowell Answer has been modified as you have mentioned. Apr 21 '17 at 13:39
4

You don't need a walker. You can pass 'items_wrap' through wp_nav_menu():

<?php wp_nav_menu( array(
    'theme_location'    => 'main-menu',
    'menu_id'           => '',
    'items_wrap'        => '<ul data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" class="%2$s" id="%1$s">%3$s</ul>',
    'container'         => ''
) ); ?>
1
  • This should be the accepted answer.
    – acidrums4
    Jun 26 '18 at 20:41
0

You need to call walker class to customize your menu structure. Like :

wp_nav_menu( array(
   'menu'   => '[menu name]',
   'walker' => new WPDocs_Walker_Nav_Menu()
) );

And in your WPDocs_Walker_Nav_Menu class you need to extends Walker_Nav_Menu class so that you can overright default function, like :

class WPDocs_Walker_Nav_Menu extends Walker_Nav_Menu {
// customise default function of Walker_Nav_Menu class.
}

Following tutorial may help you to customize the menu structure: http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

Hope this will helps you.

Thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.