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!
- 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.