wordpress dropdown search form

Read WordPress search analytics using GA for more information.

WordPress Dropdown Search

Usually adding a category for the select dropdown box to a search form allows website users to control the search results on their own. This is one of the most popular ways to assimilate search using the dropdown search form in WordPress.

If you are looking for a dropdown search that has filters check out this blog.

This post will help you create a search with a Dropdown and Filter using Ajax on your WordPress site.

To allow users to choose a specific category from a dropdown box and get along with their searches, three different tactics can be implemented in the search form:

1.     Forming your own search form: This involves editing the theme files to get a search form with categories select dropdown.
2.     Alter the shortcodes extension: Using ‘SearchWP’s shortcodes extension’ that allows users to easily output search forms and control search results pages which are done in the theme’s functions.php file.
3.     Modify the default search form: Go to the theme directory and customize the code ‘get_search_form()’, by including the ‘get_search_form’ filter in the theme’s functions.php file. Or, including a file ‘searchform.php’ in the theme, can also serve the purpose. In case you don’t have ‘searchform.php’ in your theme, WordPress will render its built-in search form.

.toggle-widget { 
   display: none; 
}

.toggle-widget {
  margin-top: 50px;
}

.toggle-widget .search-form input {
 width: 66%;
 font-size: 35px;
}
 
.toggle-widget .widget_search input[type="submit"] {
 background-color: #0099CC;
 font-size: 30px;
 float: right;
 width: 32%;
}

WordPress Plugin AJAX Search Form

There are a lot of plugins available that include a select/options dropdown menu. It would be better to add a dropdown search form in the WordPress plugin’s menu. If you were thinking about adding a search page on your WordPress site we’ve got you covered there as well. Searchable drop-down menus are not built into jQuery, but we can use the jQuery Searchable Dropdown Plugin to customize the categories of the select menus.

WordPress site search also requires you to show Titles and custom fields in your dropdown once a user has entered a query. Expertrec search takes care of this automatically.  Don’t miss out this blog on for PHP search on your WordPress site.

Click the video to learn more:

Insert ExpertRec Search Engine  into your website

For all your search needs, alternatively, you can use WP fastest site search plugin from WordPress plugin by Expertrec

1. Install WP fastest site search plugin from WordPress plugin store.
2. Go to https://cse.expertrec.com/newuser?platform=wordpress.
3. Enter your WordPress website URL and click on next->
4. The crawl will start in the background.
5. Login to your WordPress admin panel.
6. In your left panel you must be able to see expertrec’s WordPress plugin, click on that. 
7. Get your site ID (or) API key from your expertrec control panel ( here ).
8. Copy-paste your site id in your WordPress control panel and click on save changes.
9. Make sure you have upgraded to a paid plan before 15 days of free trial. (Price begins at 9 USD per month)
10. That’s it! Your brand new WordPress search is up and running! Here are snapshots of the search form and the search results pages.
11. Snapshot of your WordPress search autocomplete.
12. Snapshot of your WordPress search results page.
13. Snapshot of your WordPress search spelling error tolerance feature.
14. If the plugin method didn’t work, you can add the code from https://cse.expertrec.com/csedashboard/home/code and add it to your wordpress PHP code. Please note that you have to add separately the code <ci-search></ci-search> to a place where you want the search box to appear ( Tip!- Contact our support team to get this done). There might be a one-time fee for integration.

    <script>
    (function() {
    var id = 'your_api_key';
    var ci_search = document.createElement('script');
    ci_search.type = 'text/javascript';
    ci_search.async = true;
    ci_search.src = 'https://cse.expertrec.com/api/js/ci_common.js?id=' + id;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ci_search, s);
    })();
    </script>
    <ci-search></ci-search>
    
    

    

The perfect WordPress search bar with dropdown, Factes, Images, Titles, Price.

We also have our WordPress plugin which makes adding our search bar easier

Insert ExpertRec Search Engine  into your website