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?
Nice write-up. Thanks for sharing this tip!
Hey Jesse this is a great post, it came up first in my Google search and solved my issue in one fell swoop, awesome! I thought I’d be fooling with this forever. Anyway, what about floating the social media icons to the right of the menu, with the search remaining on the left? Instead of having them side by side?
If you don’t have time to respond nbd, this is a GREAT tutorial either way, super fast and helpful thanks!
If I’m reading the question correctly, you’d do that with CSS to flip things around.
Unfortunately this doesn’t work. I tried the second case. The sidebar registers and I pop the widget and info in; it doesn’t show up on the site, however.
I’m not sure where your problem lies without seeing all of your code and Genesis settings, then, since someone else with months of no activity on this post had success within 3 hours of this comment.
Dear Sir.
Its working fine.
but can you tell me how to add google custom search box in genesis theme.
i am not getting any solution.
https://sridharkatakam.com/add-google-custom-search-genesis/
Hey guys – thanks for the response. So I actually got help on this and I think it is clunky as heck but it worked for me – client wants a coming soon splash page up but as soon as that comes down I will post up with a link and the code, maybe you guys will have a better solution as this looks a little messy to me.
Once again though, the original code to have both of them side by side was fantastic and easy.