• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Petersen Media Group

Petersen Media Group

We help you spend less time ensuring your site is there, and more time making it profitable.

  • Home
  • About Us
  • FAQs
    • WordPress Hosting
    • Hosting Services
  • Benefits
  • Services
    • Choose your plan

Archives for April 2014

April 17, 2014

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?

Genesis Framework Genesis Framework,  menu,  search form,  Simple Social Icons

Primary Sidebar

Recent Posts

  • Change Genesis .site-title H1 Wrap on the Homepage
  • The Year of 2017 Goals for Petersen Media Group
  • Forever to Finish, Gone in the Blink of an Eye: 2016
  • Add Genesis Custom Post Type Archive Settings
  • Use Minified Stylesheet with Genesis Themes with Front-Page Customizer Backgrounds

Recent Comments

  • Mike Hale on The Year of 2017 Goals for Petersen Media Group
  • Little Shiva on The Year of 2017 Goals for Petersen Media Group
  • Luke Cavanagh on A Response to the WordPress Customizer Expansion: Removal
  • Chris Johnson on Why Partnerships Often Don’t Sail
  • divakara ganesh on Two Things You Need to Do to Your Genesis 2.2 Theme

Archives

  • January 2017
  • August 2016
  • May 2016
  • October 2015
  • September 2015
  • August 2015
  • June 2015
  • April 2015
  • December 2014
  • November 2014
  • October 2014
  • August 2014
  • May 2014
  • April 2014
  • February 2014
  • January 2014
  • November 2013
  • September 2013
  • July 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • January 2000

Categories

  • Business Tips
  • Genesis Framework
  • Investments in You
  • Products
  • Technology
  • Uncategorized
  • WordCamp Slide
  • WordPress Tips

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Footer

Petersen Media Group was founded on the idea that good work, transparent and honest communication, and radical generosity are the keys to success in business and life.

The WordPress community has shown up over and over to prove this to be true.

We look forward to being entrusted with your business.

Navigation

  • Home
  • About Us
  • Blog
  • Choose Your Plan
  • FAQs
  • Contact
  • Disclaimer

This site is independently owned. It is not sponsored by StudioPress, WP Engine, WordPress, or Automattic Inc.

Theme and various assets used with permission from SEOThemes and GenesisSiteCare.

Copyright © 2019 · Petersen Media Group