Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

How to add Find-As-You-Type Dropdown in WordPress Search

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to add Find-As-You-Type Dropdown in WordPress Search

We’ve discussed several ways to make the WordPress search more useful. In this article we are going to show you how you can add a find-as-you-type dropdown menu using the Searchlight plugin. This extension will allow you to get instant results as you type into the search field similar to google.

First thing you need to do is install the Search Light plugin. Once you have activated it look under settings in your admin panel. You will see a button that says “Searchlight”. Clicking on this will bring you to a page where you can set everything up. First, you will notice that you can select a visual theme. You have four built in options: light, dark, clean, and lime. Those of you that are more advanced can also go into the plugin’s CSS file and make modifications there. Next, select whether you want post thumbnails to show in the results and specify the exact position where you would like the dropdown menu to appear. If you are familiar with CSS you will know that this section modifies the relative positioning. What that means is that when you put a positive number into the “top” field the dropdown will be moved that many pixels down from its previous position (offset from the top). A negative number, however, will move it up. The same goes for the “left” field. A positive number will move the dropdown to the right, and a negative number to the left.

searchlight menu

In the next section you have the option to change the text displayed in the search results panel. Although this is intended for translation (hence the section title) you can use it to make modifications as well. After you choose how many results you want to display the last thing you have to do is make sure that the Searchform ID and Input field ID are correct. The default WordPress values are already inputted but if you are using a modified theme you may have to go into your searchform.php file to get your IDs. This is important because if the values are wrong WordPress will not know where to attach the dropdown menu.

searchlight menu

After everything has been styled and you are done tweaking your settings, save your changes and you should see something that looks like this when you start typing into your search bar:


Download Search Light Plugin

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. dailyblogtools says:

    wow ! really very nice step by step tutorial :)

  2. Soundeasy says:

    When we go to

    it just show


    We couldn’t find that plugin. Maybe you were looking for one of these?

    that’s why every body asking at..

  3. ecentricmarketing says:

    Hi, Just read this post. Really interesting and great timing for myself! However, it seems that “Search Light” is unavailable. Any ideas why that might be?

  4. upcloseafrica says:

    Another nice tutorial there. Could you make a tutorial on the sticky trending bar? Would love dat

  5. abdelhafidcom says:

    come on ….. give us some thing without plugins ….

  6. Mani Viswanathan says:

    That’s a nice plugin. Any tutorial to get this done without a plugin ?

    • wpbeginner says:

      @Mani Viswanathan There is nothing wrong with using plugins. If you want to do it without a plugin, then simply copy the plugin codes and paste it in your functions.php file (which is again a PLUGIN!)

      • Mani Viswanathan says:

        @wpbeginner I know there is nothing wrong in using a plugin. But since we need core plugins (which are heavy) for other purposes it’s better off to use min. codes instead.

        • wpbeginner says:

          @Mani Viswanathan You will end up using the same or similar code in your functions.php file to hook into the filters… This would result in the same usage… saving it in a separate file and calling it a plugin does not make a difference.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.