0

I'm using the native Wordpress menu. I have two top-level links with sub menus - I'd like for those sub menus to display the name of the parent menu item. So if I have a parent menu item named "Gardens" containing a sub menu of "Flowers" and "Plants", that sub menu should say "Gardens" at the top, and then list the sub menu links below it.

I've gotten as far as creating a walker to insert some H3 heading text in the sub menu. It looks like this:

class Subnav_Header_Walker extends Walker_Nav_Menu
{
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $heading = 'Heading Text Here';
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class='sub-menu'><h3>" . $heading . "</h3>\n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul>\n";
    }
}

It's not great, but it's working. Now I just need some code to get the name of the parent menu item. Can anyone help me with this?

Thanks!

1

I ended up removing that code from my functions.php file and used jQuery instead. Here's how I took care of it, if anyone wants to know:

    $('.menu-item-has-children > a').each(function(){
        var submenuHeading = $(this).text();
        $('.sub-menu', ($(this).parent('.menu-item-has-children'))).prepend('<h3>' + submenuHeading + '</h3>');
    });
0

You could also use the predefined classes that Wordpress provide to recreate h3, probably a bit cleaner.

.menu-item-has-children {
    font-size: 1.7em;
    font-weight: bold;
    line-height: 1.4em;
    margin: 0 0 0.4em 0;
}

https://developer.wordpress.org/reference/functions/wp_nav_menu/#Menu_Item_CSS_Classes

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.