Add a Search Bar to WordPress Menu in 1 Minute

Show search bar in WordPress menu by following this guide

In this tutorial, I’m going to guide you through three necessary steps following which you will be able to add a search bar to WordPress menu.

Showing a search form in the header area or at the top of the sidebar can significantly improve the user experience of your visitors on your website. It gives your visitors a chance to further explore appropriate contents on your site without skimming through all the subpages.

What is Search Form?

html code example

It’s nothing more than a form accompanied with HTTP get method and action. It should be noted though in HTML 5 you no longer need to add action attribute in the form. A child tag called input then accompanies the form. The input tag helps to provide a placeholder text and an input area for the users put in their search query.

Below you can see the HTML source code of our website’s search form.

<form method="get" class="search-form" id="search-form" action="https://designgrande.com/">
  <input type="search" class="search-field" placeholder="Search …" value="" name="s" id="search-form-xxxxxx" aria-label="Search this site">
  <button type="submit" class="search-button" name="s" role="button" aria-label="Find">
    <span class="icon-search" aria-hidden="true" role="img"></span>
  </button>
</form>

The source code shown above is generated dynamically, and the #id for the input tag changes automatically for every single page load. Sorry to say this but if you think that by placing the code shown above in your theme you will be able to display search form to your visitors on your website then you are entirely wrong.

But if you use the code provided below, then it will definitely work. Just make sure to replace the text-domain “designgrande” with your theme’s. Furthermore, feel free to modify the placeholder text to suit your needs better.

<?php $unique_id = esc_attr( uniqid( 'search-form-' ) ); ?>
<form method="get" class="search-form" id="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'designgrande' ); ?>" value="<?php echo get_search_query(); ?>" name="s" id="<?php echo $unique_id; ?>" aria-label="Search this site"/>
  <button type="submit" class="search-button" name="s" role="button" aria-label="Find">
    <span class="icon-search" aria-hidden="true" role="img"></span>
  </button>
</form>

Okay so now you know how a search form is generated in WordPress and how it works but that’s not what you want. So without any further ado let’s get back to the main topic.

How to Show Search Bar in WordPress Menu

As for this tutorial, I am assuming that you have no programming skills and so I will be showing you how to use a free and straightforward plugin to achieve what you want.

The name of the plugin is “add search to menu,” and it is freely available on official WordPress plugin repository. It has more than 10,000 active installations and is being regularly maintained and updated by its developer. Furthermore, it has received five stars based on 72 reviews, and it received its last update two months back.

Step 1. Install the Plugin

Okay, so your very first step is to install the plugin as shown in the image attached above. Once installed click on the activate button so that you can use its features.

Step 2. Configuration

features of the extension

One of the best thing about this extension is that it works out of the box without needing any single configuration from users ends. Install, activate and boom, done. It works and does exactly what it says, without any design issues and without messing up your websites header area.

But if you want, then you can obviously customize its options. Below I have discussed some of its essential features and how do they affect your websites search functionality.

1. Google Custom Search integration support.

One of its greatest functionality is its ability to integrate Google custom search to your website without actually touching a single line of code of your theme. All you have to do is to grab Google CSE search form code and put it in the appropriate box as shown in the image below.

2. Ability to toggle the visibility based on the post type.

You can choose on which post type ( page, post, attachment or just any custom post form ) you want to show the search bar in the menu area. Since I don’t have any custom post type active in my theme, I am only getting three options, Page, Post and Attachment.

3. Toggle visibility of search form in different navigation areas.

If your theme has more than one navigation display location, then this plugin will list all of them and will allow you to choose the place where you want to show the search bar. This is a quite important feature as let’s say, I don’t want to show any search feature in my header, but instead, I want it to appear in my footer navigation. In such cases, this feature will really come in handy.

4. Show only when the website is loaded on mobile devices.

It’s one another great feature, but unfortunately, it won’t work on your site if it uses any cache plugin which I believe 99% WordPress website uses as it helps to speed up your website’s performance.

5. Ability to disable the plugin’s CSS and js files.

Now, this feature is suitable for you only and only if you know how to code in CSS and JS. Personally, if I believe that I don’t have any programming skills, I won’t even touch this option as it will make search form look messed up if your theme doesn’t have any pre-defined style for input tags in the header area. So be cautious.

Step 3. Congratulations

Once you have made all your changes and customizations, click on the blue “Save Options” button and then clear all your site’s cache. If you are using any CSS, JS minification extension like Autoptimize, then do make sure to clear its cache. Now reload your website, and you should be able to see the search bar in the navigation area.

Bonus – Video Tutorial

 

If you have any questions related to this guide, then please let me know your issue in the comment area, and I will try my best to respond to each of your queries.

Written by .

Leave a Reply

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