• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Add Search Form To Any Themes Nav Menu

In this tutorial, you’ll find several tested PHP code snippets which you can use to display a search form in your navigation menu. You can use either the WordPress search function or the Genesis search function.

You can also add a search box in any menu position including the primary and secondary menu’s.

I’ll also provide some sample CSS code so you can get your form looking square and flush with your menu.

Note: The work involves playing around with different CSS properties and values which will be different for every theme. The PHP part is easy with this code.

Genesis Search Primary Nav

primary nav search

Register for full access

Prefer Google Search?

Learn how to add a Google custom search box to your navigation menu using the Thesis theme.

More Ways To Add Different search Boxes In Genesis & Other WordPress Themes

  • How To Position Get Search Form In Nav Menu
  • How To Add A Google Custom Search Box To Your Navigation Menu
  • Jetpacks New Omni Search Versus Google’s Custom Search
  • Add Google Custom Search In Nav Menu Of Any Theme

Search

Reader Interactions

Comments

  1. Emily Genevish says

    July 1, 2014 at 1:19 pm

    Trying this code but would like to implement a stacked font awesome icon instead of the search form. Seems like this would work, but since what I want to add is not the search would it still work?

    Log in to Reply
    • Brad Dalton says

      July 1, 2014 at 1:23 pm

      Hello Emily

      Still work just a bit different CSS and different code to load the fonts.

      The method to load and display font awesome is very similar to Dashicons just more involved with loading them because they’re not included in WordPress core.

      Log in to Reply
  2. anand says

    May 30, 2014 at 12:18 pm

    How can I add google’s cse to my nav bar?

    Log in to Reply
    • Brad Dalton says

      May 30, 2014 at 12:43 pm

      Whats your website address Anand?

      Log in to Reply
  3. Jinse Jose says

    February 23, 2014 at 10:29 am

    By replacing “genesis_search_form with get_search_form” wordpress search didn’t appear on my site. The genesis nav extras search bar appears again. Please help me fix it.

    Log in to Reply
    • Brad Dalton says

      February 23, 2014 at 10:34 am

      I never suggested using get_search_form in this specific code.

      Use genesis_search_form which is included in this code and works as the screenshots show.

      You can’t just add any tag to any code and expect it to work.

      Please DON’T re-publish content from this site on any other site without my permission.

      Log in to Reply
      • Jinse Jose says

        February 23, 2014 at 3:19 pm

        Using the above code I tried, but the search box is not properly aligned in the navigation bar. How can I add wordpress search box to secondary navigation?

        Log in to Reply
        • Brad Dalton says

          February 23, 2014 at 11:16 pm

          Every theme is coded differently so you will need to adjust the values for padding and margins according to your themes default CSS.

          I don’t provide custom coding solutions on demand for free.

          A small amount of effort on your behalf is required.

          Log in to Reply
  4. Joshua Trent says

    February 18, 2014 at 9:03 pm

    Hi! I followed your instructions and they worked well, I see the search bar showing up on my site so that’s a big first step! However, it’s showing up below the secondary nav. Do you know how I can make it show up to the right of the menu items?

    Log in to Reply
    • Brad Dalton says

      February 19, 2014 at 1:40 am

      Hello Joshua

      Did you try adding the CSS?

      The screenshots i embedded in the post show the result after adding the CSS code as well which floats the search bar to the left or right.

      Log in to Reply
      • Joshua Trent says

        February 19, 2014 at 1:49 am

        Yes but it didn’t work, it just was the whole width of my screen and was below the nav. I played around with firebug until I got it looking how I want, it probably isn’t correct but it looks ok.

        Thanks!

        Log in to Reply
        • Brad Dalton says

          February 19, 2014 at 1:59 am

          There’s thousands of different themes which are all coded differently.

          Generally, when you find PHP on someones site, they don’t include CSS for this reason unless the post is targeted at one specific theme.

          What you will need to do is write the CSS to work with your theme as its impossible to include a solution which works with every single theme.

          Unless, you add a widget area in that area which may still require some tweaking of the CSS.

          The PHP code hooks in the search function but doesn’t tell the browser exactly where to position it or what color it should be etc.

          The CSS positions, aligns, floats and adds padding, margins amongst other things.

          Log in to Reply
  5. Patricia says

    September 30, 2013 at 9:11 am

    Thanks for this tutorial! I tried out the code for the secondary navigation on the Metro Pro theme, and it worked with an additional bit of css code:

    .secondary-search {
    margin-top: 1px;
    margin-bottom: -5px;
    float: right;
    width: 200px;
    }

    However, I’m seeing a bullet on the left side of the search form. Any ideas how to remove it? 🙂

    Log in to Reply
    • Brad Dalton says

      September 30, 2013 at 9:23 pm

      Thanks for sharing the solution for the Metro Pro theme Patricia

      You could try something like(untested):

      .secondary-search ul {list-style:none;}
      .

      Log in to Reply
    • Brad Dalton says

      December 25, 2013 at 6:34 pm

      Actually, i just updated the code which should be using span class rather than li class for lists.

      You could also use div class as i tested both on the News Pro theme and they remove the bullet.

      Log in to Reply
      • kheniparth says

        February 8, 2016 at 4:16 am

        I m using the News Pro Theme.. and the search bar is well placed in secondary nav. However, it disappears for smaller screen sizes when the secondary menu becomes center aligned. How should i fix this?

        Thanks

        Log in to Reply
        • Brad Dalton says

          February 8, 2016 at 4:20 am

          Link to it please so i can inspect the CSS.

          Log in to Reply
    • Rui Ferreira says

      March 3, 2014 at 10:55 am

      Hey,
      Where shall we paste the additional bit of CSS code you suggested?

      Log in to Reply
      • Brad Dalton says

        March 3, 2014 at 11:00 am

        Your style.css file however it may need to be modified depending on which themes you’re using

        Log in to Reply
  6. Ken says

    September 12, 2013 at 6:31 am

    This doesn’t work for widget in header?

    Log in to Reply
    • Brad Dalton says

      September 12, 2013 at 6:36 am

      Hi Ken

      It only works for any Genesis Nav Menu.

      You can easily hook in the search form to the Genesis right widget area using PHP code or simply place the search widget in that widget area.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.