Adding an HTML5 search form in your WordPress menu 40


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 :-)


40 thoughts on “Adding an HTML5 search form in your WordPress menu

  • Reply
    mikeusru

    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?

  • Reply
    mikeusru

    Nevermind, looks like I solved the problem. I changed

    to

  • Reply
    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

    • Reply
      Christian

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

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

  • Reply
    Nathan Ball

    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

    • Reply
      ElectricFeet Post author

      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.

  • Reply
    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.

  • Reply
    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.

  • Reply
    Yotam

    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.

      • Reply
        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.

  • Reply
    Tifa

    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).

  • Reply
    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??

  • Reply
    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

  • Reply
    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

  • Reply
    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!

    • Reply
      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!

  • Reply
    Teun

    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!

    • Reply
      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.

    • Reply
      Nicolas

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

  • Reply
    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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Please check the following point before adding your comment

  1. - Did you check that you have the latest version the theme installed ?
  2. - Did you read the documentation ?
  3. - If you think it could be useful, please check your system informations : Navigate to Appearance > About Customizr and go to the bottom of the page.
  4. - Did you check if your issue was already resolved ? Before posting a new topic, you'll want to make a quick research with our Google powered search tool below.

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">