WP SITES

Log in

Add Search Form To Any Themes Nav Menu

—

by

Brad Dalton

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

Comments

22 responses to “Add Search Form To Any Themes Nav Menu”

  1. How to Add Search Form To Any Genesis Themes Navigation Menu |

    […] Tutorial from WPsites.com: […]

  2. Emily Genevish Avatar
    Emily Genevish

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  3. anand Avatar
    anand

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

    1. Brad Dalton Avatar
      Brad Dalton

      Whats your website address Anand?

  4. Jinse Jose Avatar
    Jinse Jose

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. Jinse Jose Avatar
        Jinse Jose

        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?

        1. Brad Dalton Avatar
          Brad Dalton

          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.

  5. Joshua Trent Avatar
    Joshua Trent

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. Joshua Trent Avatar
        Joshua Trent

        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!

        1. Brad Dalton Avatar
          Brad Dalton

          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.

  6. Patricia Avatar
    Patricia

    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? 🙂

    1. Brad Dalton Avatar
      Brad Dalton

      Thanks for sharing the solution for the Metro Pro theme Patricia

      You could try something like(untested):

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

    2. Brad Dalton Avatar
      Brad Dalton

      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.

      1. kheniparth Avatar
        kheniparth

        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

        1. Brad Dalton Avatar
          Brad Dalton

          Link to it please so i can inspect the CSS.

    3. Rui Ferreira Avatar
      Rui Ferreira

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

      1. Brad Dalton Avatar
        Brad Dalton

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

  7. Ken Avatar
    Ken

    This doesn’t work for widget in header?

    1. Brad Dalton Avatar
      Brad Dalton

      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.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.