Would you like to know how to create a custom search form in WordPress?
It’s crucial to provide your site visitors with quality search results if you want to ensure the best user experience.
In this article, we’ll show you how you can add a custom search form to your WordPress site in a few simple steps.
Why Create a Custom Search Form in WordPress
The native WordPress search engine capabilities are limited. By default, it searches only for title, content, and excerpt of posts and pages, completely ignoring anything else.
So if you use custom post types to publish your content, WordPress won’t display it in the search results.
This is especially critical for online store owners. Most eCommerce plugins store products and their attributes as custom post types and custom fields.
Using a custom search form, you can customize the search on your site the way you want.
Also, the places where you can put a search form are usually limited by your theme settings.
In the case of custom search forms, you can display them even inside the body or post or pages.
It might be really handy in some particular situations. For example, you can create a separate page and put to it a custom search form that searches only by a specific content type.
That being said, let’s take a look at how you can add a custom search form to your WordPress website.
How to Create a Custom Search Form in WordPress
The easiest way to create a custom search form in WordPress is to use a plugin like SearchWP.
This is the best WordPress search plugin that allows you to gain full control over how search works on your site.
Using it, you can make searchable anything on your site, have multiple search engines, easily add search forms, and many more.
Over 30,000 WordPress site owners worldwide already use it to provide their audiences with the best user experience.
Here are some other things you can do with SearchWP:
- Display search results in live mode. Would you like to show search results on your site in live mode as Google does? SearchWP provides you with this and many other features with its vast base of useful extensions.
- On-site search activity tracking. Do you want to take a look at what visitors are searching for on your site? Using SearchWP, you can track all the searches made on your site, allowing you to understand your audience’s needs better.
- Prioritize search results. Looking to bring a particular page to the top of the search results on your site? With SearchWP you can do it in just a few clicks.
- Make documents and PDFs searchable. Do you have a lot of useful PDFs and office documents uploaded on your site? Make them searchable with SearchWP to enrich your search results.
Now, let’s proceed to the step-by-step guide on how to use SearchWP to create a custom search form.
Step 1: Install the SearchWP plugin and activate it
To get started, grab your copy of SearchWP here.
Once done, log in to your SearchWP account and go over to the Downloads tab.
After that, click the Download SearchWP button to start downloading the plugin.
Copy your license key on the same tab. You’ll need it later to activate your copy of SearchWP.
Once the download is complete, upload the SearchWP plugin ZIP file to your WordPress website.
Need help on how to do that? Feel free to check out this detailed guide on how to install a WordPress plugin.
After you’ve installed SearchWP, the next step is to get your copy activated.
To do that, click SearchWP at the top panel of your WordPress dashboard.
Once you get to the SearchWP settings page, go over to the License tab.
Paste the license code you copied earlier in your SearchWP account into the License field and press Activate.
After you activate the license, the next step is to add a new search engine.
Step 2: Add a New Search Engine
To do that, navigate to the Engines tab.
Here you can see all the search engines you currently have.
You can think of a search engine as a set of rules that WordPress follows when performing a search.
By default, there is only one search engine called Default. You can customize how search works across the entire site by changing its settings.
Note that SearchWP allows you to add an unlimited number of search engines and link them to specific search forms.
So, to create a custom search form, we need to add a new search engine and then set it up the way we want.
To begin with, press the Add New button.
After that, there will appear the Supplemental engine that we’ll be customizing.
To start customizing the search engine, click the Sources & Settings button at the top right.
After that, you’ll see a window where you can change some of the search engine settings.
First of all, you can choose what types of content this search engine will search on.
For example, let’s say we want it to search only by posts. To do this, we simply need to uncheck all the search sources except Posts.
Then, we’ll rename this search engine to make it easier to identify it further.
To do this, enter the name of the search engine in the Engine Label field. For example, we’ll change its name to Custom.
Also, as you can see, there is a Keyword Stems feature enabled by default.
You can turn it on or off to make this search engine disregard word endings while performing a search.
We’ll leave this option as it is because it helps display the most relevant search results to your site visitors.
When you’re finished customizing the settings, click Done to save your changes.
As you can see, there are 4 default post attributes that the search engine pays attention to when searching: title, content, slug, and excerpt.
You can change the relevance weight of an attribute by moving the slider next to it to the left or right.
Let’s say we want our user search engine to give the highest priority to post titles.
To make this happen, we’ll set the slider next to the Content, Slug, and Excerpt attribute all the way to the left. This way, our search engine will prioritize post titles when searching.
Here is how it looks on our test site:
Apart from setting attribute relevance weights, you can also delete existing attributes or add new ones.
To do so, press the Add/Remove Attributes button.
Here you can choose which attributes, custom fields, or taxonomies the search engine should consider when performing a search.
Let’s assume that the posts on our site have a Post type custom field in which we specify what type they belong to. For example, it could be a tutorial, showcase, rating, or any other type.
To add a custom field as an attribute, add its name to the appropriate field.
Here is how it should look:
Our search engine will now consider the contents of the Post type custom field, making the search results more relevant.
When you finish customizing the attributes, press Done to save the changes.
Also, if you want this search engine to show or exclude entries under certain conditions, you can add rules to it.
To do so, press the Edit Rules button.
There are no rules by default, so click Add Rule to see what rules you can apply.
Let’s say we want this search engine to only show posts from the WordPress category.
To do so, we’ll select the Products categories options from the Taxonomy drop-down menu and type “WordPress” in the appropriate field.
Here is how it looks on our test site:
When you’re done editing the rules, click Done to save the changes.
Press the Save Engines button at the top right once you’ve finished customizing your new search engine.
That’s it. Now you have a new, fully customized search engine.
The next step is to download and activate the SearchWP Shortcodes extension.
Step 3: Install and Activate the Shortcodes Extension
This extension allows you to add a search form in any place you can add a shortcode.
You can grab it at the Shortcodes extension download page. Once you get there, press the Download Extension button.
When the downloading is complete, upload and install the extension the same way as the SearchWP plugin.
The next step is to create a new page. On it, we’ll place a custom search form associated with the search engine we created in the previous step.
Step 4: Create a New Page With a Custom Search Form
To do so, navigate to Pages » Add New in your WordPress dashboard.
Set a title to your new page and click the Plus button.
Search for the Custom HTML block and then click on it to add it to the page.
Copy and paste the following code into the added Custom HTML block:
[searchwp_search_form engine="custom" var="searchvar" button_text="Find Results"] <div class="search-results-wrapper"> [searchwp_search_results engine="custom" var="searchvar" posts_per_page=4] <h2>[searchwp_search_result_link direct="true"]</h2> [searchwp_search_result_excerpt] [/searchwp_search_results] </div> <div class="no-search-results-found"> [searchwp_search_results_none] No results found, please search again. [/searchwp_search_results_none] </div> <div class="search-results-pagination"> [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="custom"] [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"] </div>
Make sure that you replace the “Custom” search engine label in the above code with the name of your own engine label you created in the previous steps.
This code displays a custom search form that is bound to the engine you created.
It also shows the “No search results found” message if there are no results and pagination if there are more than 4 results.
Once you’ve pasted the code, press the Publish button at the top right to publish your page.
Now, let’s test out our new custom search form.
Step 5: Test Your New Search
To do so, click the View Page button after the page has been published.
As you get to the page, enter a search term into the search field and click Find Results.
We limited the search form to the “WordPress” category in our example. So let’s enter the search query “tutorial” and see if the search results include tutorials related only to WordPress or not.
As you can see, there are only posts from the “WordPress” category, which means our custom search form works just fine.
In this article, you learned how to create a custom search form in WordPress. Now you can provide your visitors with more relevant content, improve their user experience and reduce the bounce rate.
If you’re ready to create your own custom search form and provide your visitors with better search results, you can grab your copy of SearchWP here.
Would you like to add a search bar to your website? Then you might be interested in how to add a search bar in WordPress with 4 different ways tutorial.
Faced any issues with WordPress search? Check out this how to fix WordPress search not working guide.
