How to Easily Add a Search-Bar to the Site’s Main Menu in Any Theme Without a Plugin or PHP

Here is how to easily add a useful header menu search-bar to any theme, without a plugin or custom PHP code.

A search-bar nested under search-icon header menu item.

A header search-bar is a useful feature, but not all themes include it. Of course, you can use one using a plugin or complex theme-specific PHP implementation – but you don’t have to. Instead, you can utilize WordPress’s support for HTML in menu items to easily add search-bar to the header menu.

You can add the search-bar either as a first-level menu item (always shown) or nested in a dropdown. The steps for the second option (nesting) include the steps for the first option.

So, here is how to add search-bar to your site’s main menu, without a plugin or custom PHP:

  1. Create a new Custom Link menu item

    – Skip this step if you want the search-bar to be a top-level menu-item (always visible)
    – As URL, fill #
    – As Link Text, fill Search (or anything else)

    Bonus: Instead of text, you can paste SVG code in the Link Text field. You can get the Google Material Icons search-icon SVG here. Don’t forget to make the SVG accessible.

  2. Create another Custom Link menu item, and nest it under the previous one

    – If you skipped the first step, ignore the ‘nesting’ part.
    – As URL, fill #
    – As Link Text, fill TEMP for now

  3. Enable the CSS Classes field for menu items, under Screen Options

  4. Add a custom CSS class to the top search menu item

    – For easier CSS fixes later.
    – Add to the item you created in step 1. If you skipped step 1, add it to the item you created in step 2.
    – It is always a good idea to prefix custom CSS classes.

  5. Get the site search-form HTML

    – Add a temporary core search widget somewhere on the site.
    – Use DevTools to copy its HTML.
    – After copying, delete the temporary search widget.

  6. Paste the search-form HTML in the Navigation Label field of the menu item you created in step 2, replacing TEMP.

    – You can modify the HTML. I, for example, disabled autocomplete with autocomplete="off".

  7. Save, test, and make necessary CSS adjustments

    – If you use a security plugin, such as Wordfence, you might get an alert when saving. Just whitelist the action.
    – Make necessary CSS adjustments (this is where the custom CSS class we added comes in handy)
    – If you used SVG icon, remember the fill CSS property for color changes (for example, on hover). A simple color won’t work.
    – Don’t forget to test on mobile. You might need to hide a dropdown toggle and use the :hover selector to show the search form on click instead.

That’s it!

Benefits

This hack is simple and theme-independent. A PHP solution will require theme-specific research, and will probably be more complex.

Drawbacks

  • As with any other hack, this one can break. A site search is a very basic element though, so most chances are its HTML won’t change in the future. Another possibility is WordPress dropping support for HTML in menu items, but it seems unlikely. Anyway, this is one of the things you can easily test automatically using Testim.io.
  • If your site relies heavily on search, you might prefer to use a dedicated search plugin, as SearchWP. This hack won’t necessarily work with a plugin, which might introduce other solutions instead.

Conclusion

In the absence of theme support for a header search-bar, you can easily add one without a plugin or PHP, by utilizing WordPress’s support for HTML in menu items. Like any other hack, it isn’t bulletproof, but it feels pretty sturdy.

Leave a comment

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