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

// As of 3.1.10, Customizr doesn't output an html5 form.
add_theme_support( 'html5', array( 'search-form' ) );
add_filter('wp_nav_menu_items', 'add_search_form_to_menu', 10, 2);
function add_search_form_to_menu($items, $args) {
  // If this isn't the main navbar menu, do nothing
  if( !($args->theme_location == 'main') ) // with Customizr Pro 1.2+ and Cusomizr 3.4+ you can chose to display the saerch box to the secondary menu, just replacing 'main' with 'secondary'
    return $items;
  // On main menu: put styling around search and append it to the menu items
  return $items . '<li class="my-nav-menu-search">' . get_search_form(false) . '</li>';
}

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:

/* my-nav-menu-search menu item created in functions.php. Move it way over to the right */
.navbar .nav .my-nav-menu-search {
    float: right;
}
.navbar .nav {
    width: 100%;
}
.my-nav-menu-search .search-form {
    position: relative;
    margin: 0;
}
/*Stop the display of the Search button*/
.my-nav-menu-search .search-submit {
    display: none;
}
/* The "Search for" text is needed for screen readers, but we move it off screen, so we won't see it */
.my-nav-menu-search .search-form .screen-reader-text {
    position: absolute;
    left: -9999px;
    overflow: hidden;
}

/* Style the search input textbox */
.my-nav-menu-search .search-field {
    background: transparent;
    border: none;
    -webkit-box-shadow:    none;
    -moz-box-shadow:       none;
    box-shadow:            none;
    cursor: pointer;
    height: 26px;
    margin: 2px 0 2px 0;
    padding: 0 0 0 36px;
    position: relative;
    -webkit-transition: width 400ms ease;
    -moz-transition:    width 400ms ease;
    -o-transition:      width 400ms ease;
    transition:         width 400ms ease;
    width: 0px;
}

/* Expand the search box when you click it */
.my-nav-menu-search .search-field:active,
.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;
    cursor: text;
    outline: 0;
    width: 70px;
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none;
    margin: 0;
}

/* Add a magnifying glass background */
.my-nav-menu-search .search-form:before {
    font-family: 'Font Awesome\ 5 Free';
    content: '\f002';
    position: absolute; /* this is the key to put it visually inside the search field */
    font-size: 19px;
    font-weight: bold;
    top: 5px; /* tune this vertical alignment inside the search field, as needed */
    left: 5px; /* tune this horizontal alignment inside the search field, as needed */
}

/* Reset nav width and search floating for mobile menu */
@media (max-width: 979px){
    .navbar .nav .my-nav-menu-search {
        float: left;
    }
    .navbar .nav {
        width: auto;
    }
}

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:

/* Styling a search form in the menu -- see accompanying php*/

/* my-nav-menu-search menu item created in functions.php. Move it way over to the right */
.navbar .nav .my-nav-menu-search {
    float: right;
}
.navbar .nav {
    width: 100%;
}

/*Stop the display of the Search button*/
.my-nav-menu-search .search-submit {
    display: none;
}
/* The "Search for" text is needed for screen readers, but we move it off screen, so we won't see it */
.my-nav-menu-search .search-form .screen-reader-text {
    position: absolute;
    left: -9999px;
    overflow: hidden;
}

/* Add a magnifying glass background and style the search input textbox */
.my-nav-menu-search .search-field {
    background-color: transparent;
    /* CHANGE THIS LINK TO POINT TO YOUR SEARCH ICON */
    background-image: url(/wp-content/themes/customizr-child/search.png);
    background-repeat: no-repeat;
    background-position: 5px center;
    -webkit-background-size:    18px 18px;
    background-size:            18px 18px;
    border: none;
    -webkit-box-shadow:    none;
    -moz-box-shadow:       none;
    box-shadow:            none;
    cursor: pointer;
    height: 26px;
    margin: 2px 0 2px 0;
    padding: 0 0 0 36px;
    position: relative;
    -webkit-transition:    width 400ms ease, background 400ms ease;
    -moz-transition:       width 400ms ease, background 400ms ease;
    -o-transition:         width 400ms ease, background 400ms ease;
    transition:            width 400ms ease, background 400ms ease;
    width: 0px;
}

.my-nav-menu-search .search-field:active,
.my-nav-menu-search .search-field:focus {
    background-color: #fafafa;
    color: #5a5a5a;
    /* swap the two colours above if you are working with a dark navbar background */
    border: 2px solid #c3c0ab;
    cursor: text;
    outline: 0;
    width: 70px;
    -webkit-box-shadow:	none;
    -moz-box-shadow: 	none;
    box-shadow:         none;
    margin: 0;
}
/* Reset nav width and search floating for mobile menu */
@media (max-width: 979px){
    .navbar .nav .my-nav-menu-search {
        float: left;
    }
    .navbar .nav {
        width: auto;
    }
}

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.