Adding an HTML5 search form in your WordPress menu 59


There are several solutions on the WordPress Customizr forum for adding search forms. Here’s a way to add a minimal search form to the Customizr main menu.

Two methods are given here:

  1. The first method uses the in-built Genericons magnifying-glass icon. This method is fast, because the Genericons font is already loaded in the page. (Credit to for helping me get this right.)
  2. The second method allows you to choose your own image for your the search icon. This method is very slightly slower, as an extra http request is required to get the image, but it gives you more flexibility to choose a search icon that you like.

 

First add the search form to the menu

Add the following code to your functions.php:

Where to copy/paste this code? => in your functions.php file. We strongly recommend you create a child theme. Download a start-up child theme here.

Remember: you shouldn’t edit the theme’s functions.php.

This adds a search form to your WordPress main menu. Once you’ve added this code, you can refresh your page and you’ll see a search form. But it’s still very messy. The pieces are all there, but they need to be styled.

 

Next, style your search form

In the php code above, we added a class of my-nav-menu-search to the new menu item. We did this so that we can style it differently to all the other searches on your site. For example, you might have added a search in a widget on your site. And then there is a search on Customizr’s “404” page, which is the page where visitors are taken if they try to access a page that doesn’t exist (see it in action here). The my-nav-menu-search class will allow us to style only our new menu item, without affecting any other searches on the site.

We need to do the following:

  • Move the search form to the right of the menu.
  • Stop the display of the Search button.
  • Move the “Search for” label off screen. (It’s better to move it off-screen than to not display it at all, because automatic screen readers need to be able to tell people what the input field is for.)
  • Style the search input field so that all you see is the search icon.
  • Make the search field expand when you click the icon (when it’s active or gets focus), and make its expansion gradual.

The styling is slightly different for each method:

 

Method 1: Using the Genericons magnifying glass icon

To style the search form, add the following to your child theme‘s CSS:

 

Method 2: Using your own image as a search icon

 

Get yourself a search image

First things first: you’ll need a search icon image—a small magnifying glass, for example. You can find these by googling. I found these black icons and these white icons, which are free to use. The 24px x 24px PNG files work well. There’s also a black icon in the Twenty Thirteen theme; and here’s a grey icon Alternatively, you can make your own image with an image editor.

Place the icon image file in your child theme’s folder (using ftp) or in your media library (using the WordPress “Add new” button in the media library). My preference is to store the icon in your child theme, so that the child theme is self-sufficient and all the files are in the same place.

In either case, you will need to know the image file’s URL. The file’s URL will be something like this:

  • If the image is in your child theme: http://example.com/wp-content/themes/customizr-child/search.png
  • If the image is in your media library: http://example.com/wp-content/uploads/2014/04/search.png In the media library, you can see the file’s URL in the panel on the right when you edit an image.

Now you’ve got your image, let’s style your search form.

 

Styling the search form

To style the search form, add the following to your child theme‘s CSS:

 

Caveats

  • This approach works well on sites with sufficient space to the right of the menu items. Change the ” width: 70px;” declaration above to make the search field narrower or wider.
  • The search icon is not clickable after you enter your search—it’s not a button or a toggle. Getting an effect where you can click once to open the search field and click again to search would require javascript. The method above uses only php and CSS.
  • This solution adds html5 support to the WordPress search forms on your site. This allows us to add the “Search …” text inside the search field (this functionality was added in WordPress 3.6).While it’s good to enable html5 support in the search field this way, if you have styled any other search boxes on your site you may need to revisit their CSS, as they will also now output with html5-enabled elements.

 

Need help?

If you’ve never used a functions.php file, check out this article. If you need more help, post your question on the WordPress Customizr forum.


About ElectricFeet

ElectricFeet started using Wordpress for the first time in the summer of 2013. Customizr is such a great theme, it's hard not to get swept up in the fun of discovering new tricks for modding pages with (and for) others on the Wordpress forums. The fun continues :-)

  • yavar khan

    could you help me if i want this search bar on the top right corner

  • yavar khan

    opsi !Notify me of followup comments via e-mail

  • Thanks for the awesome snippet!

    Is there an easy way to make it stop from autohiding the search box altogether, but still hide the search button?

  • Nevermind, looks like I solved the problem. I changed

    to

  • Frank

    this code makes the menu nav bar much fatter with a lot white space below the menu line than before, any idea how to fix it? thx

    • Christian

      You can set height from 26px to 0px. That should help.

      In this example i already changed the height from 26 to 0px.

      • Christian

        Sorry. Mistaken… now it does not open search box.

  • I am not using this theme but it causes errors when i try to implement the functions.php changes just curious if it the position i put the code as copy and pasted from above or is it another reason… Thanks NB

    Parse error: syntax error, unexpected ‘;’ in /home/nebcrte1/public_html/afh/wp-content/themes/afhparts/functions.php on line 37
    – Parse error: syntax error, unexpected T_STRING in /home/nebcrte1/public_html/afh/wp-content/themes/afhparts/functions.php on line 39

  • karim morgo

    Hello, what if i need this search bar to search only some image folder in my directory ?

    • ElectricFeet

      Hi karim. This is a question that is beyond the scope of this snippet. I don’t think that WordPress can distinguish a search by a folder. It would need coding. (But I may be wrong.) Another approach would be to tag the images and then limit the search to the tag using an approach similar to the one shown here.

  • Pingback: add an HTML5 search form WordPress | Devtoolsplus()

  • Abheeshek

    Hello, great piece of code, although I do not have enough knowlwdge of CSS/php, I know it used to work before in older version, but as said here in new version for search-form, I have a few things to ask,
    1. Can I have the search form at the top of Nav bar
    2. How can I get the search box extend animation to open from right to left in-stead of left to right.

  • Beth

    Hello and thank you for this amazing snippet. It works perfectly, but I have a question: What do I need to change in the php when I want the search in social media block (search icon shown like the last social media icon). Thank you for any help.

  • Thank you so much for this snippet. For some reason I can see the magnifying glass icon when I add CSS in the ‘customize’ but, when I save and go to the website, the icon doesn’t show. Anyone happen to have suggestions? Thanks.

    • Tod Franklin

      Yotum, did you ever get an answer for this?

      • Rocco Aliberti

        Hi Todd and Yokam, as stated in the snippet:

        To style the search form, add the following to your child theme‘s CSS:

        So that code has to be put in the child-theme style.css

        Todd, you can’t use anymore quotes and double quotes (which previously could be escaped with the backslash ‘\’) in the custom css-box due to new wordpress theme guidelines.

        Hope this helps.

  • Seth Graves

    Thanks! Worked perfectly and looks great!

  • Thank you so much for this quick solution! I just added it to my theme and it seems to work perfectly with the current version of Customizr (3.2.10).

  • Pingback: Such-Icon im Menü | Tifa's Page()

  • Sanka Naak

    I tried changing the color of the search box border from
    .my-nav-menu-search .search-field:focus {
    color: #5a5a5a;
    /* change the colour above if you are working with a dark navbar background */
    border: 2px solid #c3c0ab;

    TO

    .my-nav-menu-search .search-field:focus {
    color: #5a5a5a;
    /* change the colour above if you are working with a dark navbar background */
    border: 2px solid #f78c40;

    but it stays the same…. am I missing something here??

  • Sean

    Hi all,
    This sounds like a great solution, thanks for providing it!
    I’ve managed to get the search bar to appear, however the styling of the bar doesn’t seem to be working.
    Has anyone else had any issues with this? Perhaps WordPress/Customizer have changed the core functionality for the search?

    Any help would be much appreciated!
    Thanks,
    Sean

    • Sean

      Hi there,

      Not to worry I have managed to figure this out now! Thank you again

  • Sean

    Hi,
    Last question now.. I really like this implementation, but I’m looking to add the search bar after the social media links.
    Is there an easy way to add this search bar after the social media icons instead of the navigation bar?

    Thanks,
    Sean

  • Kelly

    When I copy the provided code into my theme’s child .css document, nothing happens to the search menu. Any idea why this is? Thanks!

    • Kelly

      I figured out the problem– I was importing from the parent .css file, so the code was not applying to the child’s function.php code. Thanks!

  • Hello,

    First of all, thanks so much for this great and easy to customise theme!

    I have just implemented the search bar in the menu. Now I would like it to be without the ‘Search for’ tekst and without the ‘Search’ button.
    Any ideas on how to do this?

    Thanks!

    • Teun

      It’s fixed… idk how.. but it is 😀

  • Bill S.

    Works perfectly. Thanks for sharing your knowledge.

    • Bill S.

      Just to follow up:

      1. Absolutely positioned element should be positioned with ‘top:6px; left:6px;’, rather than with padding.

      2. For an absolutely positioned element to stay within it’s Parent, the Parent needs to have a position, such as position:relative. For a :before or :after pseudo-element, the Parent is the main element: in this case, .search-form

      Doing this works fine for me, and I think this is the preferred way to position Absolute elements,and to keep them within their Parent. Thanks again for your tutorial.

      • Rocco Aliberti

        Hello Bill,
        I agree 😀
        Thank you for your contribution on this!
        Snippet updated.

  • Pingback: Customizr | Pearltrees()

  • Karolina

    Hi!
    After adding the search box to the navigation bar, the “Search for” text appeared above the search box in the sidebar. Does anybody know how to move it off screen in this case, too?
    Thank you in advance!
    http://bookshelfreflections.com

    • Hi Karolina !
      Would you mind posting your help request in the support forum ? This is where support and debug is provided in priority.
      Thanks 🙂

  • Siddharth Saudagar

    This snippet works perfect for search form in menubar!
    Is it possible to add search form in navbar but not in menubar as a menu item? Now while viewing in mobile search form is displayed once tapped on menu. It would be great if search form is displayed between menu and social icons on mobile.

  • Peter Munster

    Hi,

    I have implemented the snippet and it has worked well. But I still not found a solution how to change placeholder text in Search Form (eg from “Search ..” to “Search & Hit Enter”)? And how to change position of the Image from the left to the right in Search Form (I use Method 2: Using your own image as a search icon)?

    Thanks!

  • Jose Lefort

    Hello and thank you for this amazing snippet. It works perfectly, but I
    have a question: What do I need to change in the php when I want the
    search in social media block (search icon shown like the last social
    media icon). Thank you for any help.

  • iamhungrygeek

    This works great! I have one small issue though, on an android mobile device, search input field in the collapsible menu is blocked by the keyboard that pops up. Is there a way to fix this? The content is supposed to be pushed up by the keyboard but for some reason in this instance it is not.

  • Giorgio Riccardi

    Hi,
    following the switch to Font Awesome, in Method-1 css, I just changed lines 59 and 60 into this:

    Hope it helps

    • Menaka S

      Thanks Giorgio. It sure will help some.

    • Sarah

      Hi Giorgio, I was just looking how to do this so thank you! My icon hasn’t updated although I’m on the most recent Customizr (I updated the CSS in my Child Theme). Did you need to updated the Font Awesome somewhere else? Hope you can help! Sarah

  • Pingback: Search bar for the main menu! - TechStruggle.com()

  • Vic Tor

    Thanks, great for Chrome and IE (ok in Edge too), but does not show up at all in Firefox (ver 46.0.1) – anyone confirm this?

  • Menaka S

    Hi,
    Create two different menus, one with search form and one without. Place the first one in header and the second one in footer.

    • Alexis Rengifo

      Thanks for your reply. I was wondering if there is a way to add menu items restricted by the context (placeholder) so you can make it only to act for header (for example).

      Thanks,
      Alexis

  • Ravi

    Firstly, I sincerely want to thank Team Customizr for such an awesome theme and extended support. My question, is it possible to use Font Awesome icons instead of Genericons (for adding the Search bar in Nav). If yes, I am certain it can be used in many other situations, such as for Social icons, etc. Please share some general insights or share a helpful link.

    • Menaka S
      • Ravi

        Hi Menaka, thanks for the prompt response. I checked that link and tried many times, but still unable to use these Awesome icons. My website is seowebup.com and I want to use the Skype icon in the Footer Widget area one, instead of the “(Skype ID)”. Please help. Thanks in advance.

        • Menaka S

          Hi Ravi,
          Add this code where you want the icon to appear

          Add the following to your child theme’s style.css

          • Ravi

            Hi Menaka, Thanks for sharing the code, I am not sure if this is the right place to discuss about this topic. But I am using the icon in footer (Widget one) and there are few issues that I am facing. First the icon is too small, and second the icon is going to the next line (I tried using span, but still the same problem).

    • Giorgio Riccardi

      already posted above:

      switch to Font Awesome, in Method-1 css, I just changed lines 59 and 60 into this:

      • Ravi

        Thanks Giorgio, I noticed your response after posting the comment.