I'm trying to create a nav menu with a clickable dropdown function but minimize scripting at the same time, so I found out a way to achieve this with an invisible input box and CSS. My only problem is I have no experience with PHP and getting the menu to load the right HTML is very frustrating (it took me forever just to get the custom walker to show up in the first place). This is the effect I want to achieve - the same default WordPress menu, but the menu items with children are slightly different:

<ul>
    <li>A menu item</li>
    <li>A menu item</li>
    <li>
    <input id="check-(item-id)" type="checkbox" />
    <label for="check-(item-id)">A menu item with children</label>
        <ul>
            <li>Child one</li>
            <li>Child two</li>
    </li>
    <li>A menu item</li>
</ul>

In my functions.php file, I have this:

<?php
/*---- Custom Menu Settings ----*/
function custom_menus() {
    $locations = array(
        "top-menu" => __( "Top Menu" ),
        "side-menu" => __( "Side Menu" ),
       );

    register_nav_menus( $locations );
    }

add_action( "init", "custom_menus" );

class Clickable_Dropdown_Walker extends Walker_Nav_Menu {
    // The code isn't even worth showing because I've tried at least a dozen combinations and nothing's worked
    }
?>

And finally, in my sidebar.php I have this:

<?php
if ( has_nav_menu( "side-menu" ) ) {
    wp_nav_menu( array( 
        "theme_location" => "side-menu", 
        "container_class" => "side-menu",
        "walker" => new Clickable_Dropdown_Walker() ) );
    }
?>

Any help would be appreciated, thanks!

I'm trying to create a nav menu with a clickable dropdown function but minimize scripting at the same time, so I found out a way to achieve this with an invisible input box and CSS. My only problem is I have no experience with PHP and getting the menu to load the right HTML is very frustrating (it took me forever just to get the custom walker to show up in the first place). This is the effect I want to achieve - the same default WordPress menu, but the menu items with children are slightly different:

<ul>
    <li>A menu item</li>
    <li>A menu item</li>
    <li>
    <input id="check-(item-id)" type="checkbox" />
    <label for="check-(item-id)">A menu item with children</label>
        <ul>
            <li>Child one</li>
            <li>Child two</li>
    </li>
    <li>A menu item</li>
</ul>

In my functions.php file, I have this:

<?php
/*---- Custom Menu Settings ----*/
function custom_menus() {
    $locations = array(
        "top-menu" => __( "Top Menu" ),
        "side-menu" => __( "Side Menu" ),
       );

    register_nav_menus( $locations );
    }

add_action( "init", "custom_menus" );

class Clickable_Dropdown_Walker extends Walker_Nav_Menu {
    // The code isn't even worth showing because I've tried at least a dozen combinations and nothing's worked
    }
?>

And finally, in my sidebar.php I have this:

<?php
if ( has_nav_menu( "side-menu" ) ) {
    wp_nav_menu( array( 
        "theme_location" => "side-menu", 
        "container_class" => "side-menu",
        "walker" => new Clickable_Dropdown_Walker() ) );
    }
?>

Any help would be appreciated, thanks!

• php
• customization
• menus
• walker

Share Improve this question asked Jun 25, 2019 at 22:36 mira-fraiyomira-fraiyo 1122 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

I did this in my theme, so you can look at the whole code here: https://wordpress/themes/twenty8teen

I used the standard walker and added a filter for 'walker_nav_menu_start_el'. Of course, I also wanted it to work for the fallback Page menu, so I cloned the standard walker and added the call to apply_filters with a slightly different filter.

/**
 * For custom menu, adding an input and label for submenus.
 */
function twenty8teen_nav_menu_start_el( $item_output, $item, $depth, $args ) {
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    if ( $classes && in_array( 'menu-item-has-children', $classes ) ||
        in_array( 'page_item_has_children', $classes) ) {
        $item_output .= '<input type="checkbox" id="sub' . $item->ID
            . '"><label for="sub' . $item->ID . '"></label>';
    }
    return $item_output;
}

/**
 * For page menu, adding an input and label for submenus.
 */
function twenty8teen_page_menu_start_el( $item_output, $page, $depth, $args ) {
    if ( isset( $args['pages_with_children'][ $page->ID ] ) ) {
        $item_output .= '<input type="checkbox" id="sub' . $page->ID
            . '"><label for="sub' . $page->ID . '"></label>';
    }
    return $item_output;
}
add_filter( 'walker_page_menu_start_el', 'twenty8teen_page_menu_start_el', 9, 4);

I managed to use what you did and other resources to come up with my own solution! The code is short and sweet:

class Clickable_Dropdown_Walker extends Walker_Nav_Menu {
    function start_el( &$output, $item, $item_output, $depth = 0, $args = array() ) {
        if( in_array( 'menu-item-has-children', $item->classes ) ){
            $output .= '<li class="menu-item-has-children"><input id="check-' . $item->ID . '" type="checkbox" />'
                    . '<label for="check-' . $item->ID . '">' . $item->title . '</label>';
            }

        else {
            $output .= '<li><a href="' . $item->url . '">' . $item->title . '</a>';
            }
        }
    }

I had to make sure the walker was enabled in my custom menu and the menu in the WP Admin was assigned to "Side Menu."

Thanks for your help!!