Adding an HTML5 search form in your WordPress menu 12


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


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

Leave a Comment

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

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

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=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">