How to Make a WordPress Automatic Submenu With Genesis

Sometimes it’s handy to have a submenu under your primary website menu. There are many versions of this. In this case I’m referring to the kind that works like this: when you click on a Primary Menu item, you get a submenu appearing underneath it which only contains “sub-items” of what you clicked. If you click a submenu item, the same submenu stays put! This makes for pretty pleasant navigation. I made one of those for a client who was using a stock WordPress theme, and then I thought, “why not make this in Genesis?” It can be so much nicer than the massive droppings dropdowns that people stuff into their sites.

Drop Down, and Give Me Twenty

Requirements, Limitations

  • To make this you’ll need to be comfortable editing some PHP code. In other words, you have some web development skills. (I see people fleeing already!)
  • This is for making, in effect, a two-level menu. When you click a top-level item, its “children” will appear. If you’re going to have 3 or more levels, this scenario will not do that. It’s actually the same menu appearing twice, once showing “level 1”, and once showing “level 2”. I know, it’s confusing. ๐Ÿ™‚
  • This works on a Two-level WordPress menu, created via Appearance…. Menus, and that is designated as your Primary Menu. If your Primary Menu is only one level, this code won’t automagically grab sub-Pages (children) of its Pages if your sub-pages are not added to the menu. I made this incorrect assumption when I first tried this!
  • You may need some CSS ability to make the submenu look the way you want. My code strives to replicate your Primary Menu styling by using its surrounding markup. Or just hire me!
  • This doesn’t work well if you’re doing a Secondary Menu. (at least on many themes) The idea of this submenu is to have it appear where you would usually have a Secondary Menu (just under the Primary Menu) and have it be smarter!
  • Don’t use unclickable top-level items. I know that sounds funny, but many menus around use a “non-page” top menu item just to mark things under it as being in a group, and they’ll appear as dropdowns. In this menu, that wouldn’t make sense – you’d click a primary menu item and nothing would happen, frustrating the visitor.
  • This is written for Genesis 2, but could easily be adapted for Genesis 1 if you’re savvy, just by changing some markup.
No, I said "submenu", not "submit"!
No, I said “submenu”, not “submit”!

 

Before getting too far into this, I should say that it’s a quite complex thing to set up! So unless you’re very proficient with the steps you see here, I’d strongly suggest hiring a developer to do this, such as me. I can do this for you with almost any WordPress theme, not just Genesis ones. ๐Ÿ™‚ Here are just a few possible complications:

  • You already are using Primary and Secondary menus and need to make a brand new one. I just ran into this on a site, and it’s trickier to set up.
  • The difficulty of menu styling in general. And no, you’re probably not going to be able to this without editing CSS code, even if you have a cute styling plugin. A very quick example – making a menu and submenu, with each having very different styling.
  • With many themes, you won’t have handy programming hooks for doing this, so you’ll need to wade through template file code.

For much of this process, I enjoyed using the fine work of Christian Varga. We will be using his lovely code, and just adding some Genesis code to adapt it for our purposes. First, go to his nice tutorial page, and copy the first large block of code. This will go into your child theme’s functions.php. Note: delete the very first line of his code – the first line of your functions.php file will already have that line in it, and it will cause an error if you have this twice.

So get that done first. Now here are my goodies. A quick summary:

  • Tell WordPress to treat all menus as one level.
  • Generate an extra menu just below your Primary Menu – this becomes your submenu. Surround it with markup that inherits the styling of your Primary Menu.

I was thinking of making this a plugin. I might at some point. But I’m sure questions will come up about styling the submenu, and requests for a user-friendly way to do that. This would open Pandora’s box, just as any styling issue does. For example, seen any Genesis forum questions about ugly headers lately? ๐Ÿ˜‰

Demo

If you’d like to see a simple example, I added an auto submenu to my One Page Epik theme demo. Visit this page, look at the upper right corner, and click the “Animals” and “Fish” links to show the submenus.

Isn’t That Special?

If you’re geeky like I am and get around, you’ll see other Genesis submenu scenarios out there. With anything in WordPress, there are usually many ways to do something. What’s different about my method, apart from being a collaborative effort? Several methods rely on Pages alone, and construct the submenu from them. However, because I’m using the WordPress menu, we can also include Custom Post Types, Categories, and even Custom Links in our submenu. In today’s content management world, this may be important to you. Using the WordPress menu also gives you handy CSS classes to custom style the current selection and its parent, for instance, very cool from a CSS perspective! Also, my method only uses one menu – I’ve seen some where someone will make a whole bunch of menus, and then make custom code to conditionally display one or the other – not my idea of a good time. Finally, using Christian’s method works great on a non-Genesis theme!

There’s also no telling how many markup variations there are in Genesis themes, even though this scenario should work well in many cases. In any case, Codecanyon has plugins for all kinds of crazy menus, complete with exciting admin panels, and that’s where I’d probably send the more demanding non-programming people who want a tricked-out submenu and want to tinker for hours.

SubMitted For Your Approval

Now THAT'S a submenu!
Now THAT’S a submenu!

 

Update 7/17: I had someone contact me about implementing this submenu. So far, great. Then I found out that she had used a responsive menu plugin. Not so great. Several aspects of the plugin interfered with the code that I use for this menu.ย 

So it was an interesting situation. She could disable the plugin and my submenu code would work fine, or she could continue using the plugin, but without my submenu code. Since the plugin had many menu schemes, she could have tried a whole bunch of them, but she was dead set on one particular scheme combined with a submenu. Since I couldn’t make all this work together without re-coding the plugin, a major deal, not to mention it invalidating the plugin warranty in a sense, I bowed out.ย 

The upshot of this is that I don’t guarantee that my code will work with all plugins, even though it uses very normal WordPress menu code methods.

17 Comments


  1. Thomas,
    I’m glad you liked it. By the way I like your site… very stylish!!

    Dave

    Reply

  2. Hi, great tutorial. I manage to get it work without problem.
    I know u said that unclickable top-level items doesnt make sense.
    But ๐Ÿ™‚ i have “Parent link” let call it “Partners” that have 4 links that point to other sites. Is it possible to enable this in this case or u have better idea or solution?

    Thank you,
    Best regards
    Josip

    Reply

  3. Josip,
    I’m glad that helped! Interesting question. My basis answer would be that in your case, just use dropdowns – and coming from me, that’s rare. ๐Ÿ™‚

    Using the automatic submenu method, you could sort of “finesse” it – you could make the Partners a real page link, which would lead to the other 4 appearing in the submenu. Then you could also stick the 4 links in the content area of the page, so the user could use the submenu links OR the links in the page content. I think that would cover you.

    Cheers, Dave

    Reply

  4. Hey Dave

    Thank you so much for this guide. Implemented and used it on this site:
    http://staustelltown.co.uk/category/where-to-stay/
    It has made life so much easier in terms of the sheer number of categories we had. The only problem I have is moving the menu so it slips below the current one and then also styling it so it looks half decent.
    Any ideas please?
    Thanks
    Rich

    Reply

    1. Hi Rich, I’m glad that helped you, and the site looks very good. Beautiful scenery!

      As for your question, I’m not quite clear on what you mean. Did you want the top menu (home… local news…) to appear below the “submenu”? And “slips”… is this a reference to the menu moving around at different screen sizes?

      Finally, as for “decent styling”… that’s entirely subjective, so it’s impossible to sensibly answer. ๐Ÿ™‚ In any case, CSS changes would be needed to adjust the styling.

      Dave

      Reply

      1. Hi Dave

        Hope you had a good new year. Thanks for the reply.

        What I mean is when you click on a top bar menu, I was hoping the submenu would appear immediately below it rather than split by the image.

        Thanks

        Rich

        Reply

        1. Richard, Thanks. I don’t see an image, but I do see that you have menus separated by the words “St Austell Town”, and maybe that’s what you’re referring to. You can make the menu and submenu adjacent, but it requires some programming changes. There are lots of code examples on the Studiopress site that you can refer to, there might be one there that does that. Or you can simply have a programmer do it for you.

          Dave

          Reply

  5. Is it possible to make a submenu for a submenu & so on? Or does that cause too much of a hassle for the visitor?

    Much Obliged!

    Reply

    1. I honestly don’t know… it might be possible with yet more custom code.
      But it’s probably too much of a good thing. ๐Ÿ™‚

      If any site gets this complex, in most cases the site’s organization hasn’t been thought out beforehand. Time to go back to the drawing board.
      Businesses make this mistake all the time by essentially spewing out their company’s org chart, which is not only information clutter, but it becomes the company’s love letter to itself, which is boring and off-putting to site visitors, who will leave rather than follow multiple levels of navigation just to see some manager’s fuzzy pic and favorite color.

      TL;DR: Just don’t have this many menu items.

      Dave

      Reply

      1. Thanks for the heads up!

        Yea, I might go for more of a table of contents like wikipedia. Although since I have it on the sidebare, I’m wondering how to make it mobile friendly. Maybe I’ll try using buttons.

        Reply

  6. Hallo Dave. Thank you for this great post.

    I wonder if there is a simple elegant way to make the parent item from the main menu stay โ€˜activeโ€™ (style) if one of the sub items is โ€˜activeโ€™.

    Julia

    Reply

  7. I have solved it. Just to style the โ€˜current-menu-parentโ€™ class was enough. Sorry, didnโ€™t expect is to be so easy. Again – great post.

    Reply

  8. Hi Julia,
    Glad to hear that! I tried replying, and it didn’t make it, so here I am manually.

    WordPress pumps out so many classes on menus that there’s something for almost any purpose out there. ๐Ÿ™‚

    I was going to suggest styling….

    .current-menu-parent > a

    … but it looks like you’re all set!

    Cheers, Dave

    Reply

  9. Great, thanks!
    Do you have any advice how to turn this off for Mobile an keep the standard dropdown on Mobile?
    I would appreciate your input!

    Reply

    1. Just found out: I put the whole stuff in an if-else loop for is_mobile, works great.

      Reply

      1. Jay, I’m glad you found what you needed. All this can be done via CSS, too. But I wouldn’t – I advise my clients not to use any dropdowns on mobile – this is usually pretty bad usability.

        But I know that some clients can’t get with that program, and have deep dropdown love for some reason. ๐Ÿ™‚ I think another reason for this is that they are totally unaware that giant menus (inadvisable unless necessary) can be tamed in other ways, such as submenus and so on.

        And even a “hamburger” isn’t the only way to do a mobile menu, other good schemes are around. But mobile drop-downs… not if I have any say in the matter. ๐Ÿ™‚

        Dave

        Reply

Leave a Reply

Your email address will not be published. Required fields are marked *