Help Center
How to Create a Custom WordPress Search Form

How to Create a Custom WordPress Search Form

Learn how to create a custom WordPress search form and manage its settings using the JetSearch plugin.

Before you start, check the tutorial requirements:

  • Elementor (Free version), Block editor (Gutenberg), or the Bricks theme

  • JetSearch plugin installed and activated

  • JetEngine plugin installed and activated with Custom Post Type (CPT) and taxonomies created

    If you have not done it yet, read the tutorial.

  • A page or a post created previously

Adjust the JetSearch Settings

Navigate to WordPress Dashboard > Crocoblock > JetPlugins Settings > JetSearch > Ajax Search Settings

In this case, we intend to search over the site and additionally display a category list in the search results. Therefore, we enabled the Show Categories List toggle and kept the default “Categories” option in the Taxonomy drop-down. We left the Source drop-down list empty to search the entire site. Then, we scrolled down the tab and enabled the Sentence Search and Search in taxonomy terms toggles.

jetsearch plugin ajax search settings tab

In the next stage, we picked the needed taxonomy in the Taxonomies field (the “Property type” in this case), scrolled the tab down, and kept the default “Relevance” option selected in the Results Order By drop-down list and “ASC” Results Order.

jetsearch plugin ajax search settings tab scrolled

Finally, we scrolled the settings tab to the end and pressed the “Save Options” button.

Add the Ajax Search Widget/Block/Element

Open a page or post in the editor you prefer. In this case, we used Elementor.

Find the Ajax Search widget in the search bar and drag and drop it to the page.

the ajax search widget

Customize the Search Form

Unroll the Ajax Search widget settings and move to the Content > Search Form tab.

the ajax search widget setting tabs

Here, we adjust the following settings. First, we picked an icon from the Media Library in the Input Icon field. Then, we added the “Type your request” text instead of the default “Search…” in the Placeholder Text field and set the Minimal Quantity of Symbols for Search to three characters instead of two default ones.

In the next step, we enabled the Show Submit Button toggle and typed the “Submit” text in the appeared Submit Button Label field. Then, we selected an icon for this button in the Submit Button Icon field.

We activated the Show Categories List toggle and chose the needed Taxonomy (the “Property type” taxonomy in the given case), as well as typed the “All Property Types” in the Select Placeholder field. Finally, we activated the Responsive Form on Mobile toggle.

the ajax search widget search form settings

Save the changes by pressing the “Publish/Update” button.

Check the Results

Move to the front end and type your request, which should be at least three characters long (according to the specified settings). In this case, we typed the “house” text.

the search form on the front end

Additionally, we selected the “Duplex” Property Type in the drop-down menu with categories.

search form with the taxonomy specified on the front end

Finally, we pressed the “Submit” button and got the search results.

the submit button of the search form on the front end

That’s it. Now you know how to create a custom WordPress search form and manage its settings using the JetSearch plugin.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.