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
- 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!
- This scheme works for Pages and their Children Pages only. So let’s say you click on a blog Post mentioned on a page. You will travel away from the “page tree”: you’re no longer under the Parent Page anymore, so you’ll see no submenu. Posts are not part of the Page hierarchy. Instead, you could consider simply using a Secondary menu of blog Categories – that’s not an automatic submenu, but it would help someone find Posts of various types pretty easily.
- 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.
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? 😉
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
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.