Adding an HTML5 search form in your WordPress menu


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.


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



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

  • Nili Shani

    Hi there,
    I just used the above code in my website and it was infected with a trojan!
    I get a message from Kaspersky that I have “Trojan-Downloader.JS.FakejQuery.b”
    I have removed that code and css, but it’s still infected!
    I had to delete EVERYTHING!
    🙁
    nils

    • Menaka S

      Hi,
      I am sorry about your site getting infected.

      This code has been used by numerous users in the past and I don’t think this introduces a trojan in any site.

      You can try to secure your site against attacks in future.

      • Nili Shani

        Yes, I can imagine that, and still, the website was fine one minute before and then next minute after putting in this code I got a warning from Kaspersky.
        I don’t understand it either, I just know that I can’t use this code. I can’t understand HOW this has happend, but that was the only thing I changed and the effect was dramatic.
        Just wanted you to be aware of that.
        Thanks!
        Nili

Comments are closed.