Adding Simple Social Icons & a Search Form to a Genesis Menu

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.

Header area Primary nav

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.

DIY Natural generated code

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.

Simple Social Icons & 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.

Simple Social Icons and Search Form

That’s all there is to it.

Questions? Something for the tip jar?

Did you enjoy this article?
get posts delivered to your inbox

This site/post/code/(everything) runs on Genesis Framework

Genesis Framework for WordPress

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

  • http://michaelmusgrove.com/ Michael Musgrove

    Nice write-up. Thanks for sharing this tip!