It’s great how new client projects, especially those that a designer has a hand in, push a developer’s abilities. Every now and then, I mange to do something cool by piecing together functions and making something not only nice for a client but something to share with the community. In this case, it’s both Simple Social Icons and a search form inside Genesis menu items.
It should go without saying that this is for child themes running on the Genesis framework only, but I just said it. If you need help getting started editing Genesis themes, take a look at this starter tutorial.
Menu case study #1
My last project was a complete theme re-write of a bunch of stuff being done with hard-coded functions or page templates exiting out of PHP and writing entire sections of the page in HTML. That had to be fixed. One of those bits was putting a search form INTO the nav menu. We were using the header right widget area with the custom menu and it was a major pain to put the form where I wanted because of a lack of hooks exactly where needed and additional widgets in the area.
With a little more study of the situation, I went back to Gary Jones’ Genesis Header Nav plugin (which eliminates the widget area) and putting the other header content into the header hook with the proper ordering for the layout. For mobile, I switched to primary nav above the header.
The generated code was exactly what I was aiming for: putting the search form into a menu slot as li.menu-item.custom-search for maximum control of the CSS.
I’m sure you’re just wanting the PHP for this now, so here is my Gist:
You’ll see that the only difference between the two (besides the function name) is the nav location name. I tried several things to combine the two into one function and I’m pretty sure it can be done, so I’ll gladly edit this and the Gist if someone feels like showing the way.
Menu case study #2
The very next menu project upped the ante. Funny how things work out this way… the site was using UberMenu just to have some social links/icons in a dropdown menu, which I walked the client through some better options than that, especially given mobile devices not having a hover effect. That meant that part of the consultation included a very visible solution for the social network links, as well as the search form.
Most of us love Simple Social Icons but that is a widget. I decided it wasn’t going to be good enough to put the widget in the menu without it being another li.menu-item like the search form. The first step is to create a new widget area for the menu, which can also be used in other areas by calling the area in a function and proper hook. Then it was time to alter the code I used for the search form to put the social icons in before the search form. This took both PHP and CSS to position everything correctly.
That’s all there is to it.
Questions? Something for the tip jar?