Custom Drop Down Forms

wordpress dropdown search form

Rate this article

Share this article

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.

nav-menu WordPress

Custom Drop Down Forms

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:

YouTube video

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. Login to your WordPress admin panel.
  2. click on add new plugins and search for wp fastest site search plugin . Install it and dont forget to activate.wordpress search not working
  3. After activating the plugin you willbe navigated to signup page. Create an account.
    wordpress search not working
  4. Make sure you have upgraded to a paid plan before 15 days of free trial. (Price begins at 9 USD per month)
  5. That’s it! Your brand new WordPress search is up and running! Here are snapshots of the search form and the search results pages.
  6. Snapshot of your WordPress search autocomplete.wordpress search not working
  7. Snapshot of your WordPress search results page.wordpress search not working
  8. Snapshot of your WordPress search spelling error tolerance feature.wordpress search not working
  9. 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>
    
    

    wordpress search not working

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

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

 

wordpress dropdown search form

 

 

Insert ExpertRec Search Engine  into your website

Are you showing the right products, to the right shoppers, at the right time? Contact us to know more.
You may also like