SearchWP

News

how to create a custom search form in WordPress

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.

SearchWP logo

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.

go to the downloads tab

After that, click the Download SearchWP button to start downloading the plugin.

press download SearchWP

Copy your license key on the same tab. You’ll need it later to activate your copy of SearchWP.

copy your license key

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.

go to SearchWP settings

Once you get to the SearchWP settings page, go over to the License tab.

go to the license tab

Paste the license code you copied earlier in your SearchWP account into the License field and press Activate.

activate your license key

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.

go over to the engines tab

Here you can see all the search engines you currently have.

the list of default search sources

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.

add a new search engine

After that, there will appear the Supplemental engine that we’ll be customizing.

the Supplemental search engine

To start customizing the search engine, click the Sources & Settings button at the top right.

click sources and settings

After that, you’ll see a window where you can change some of the search engine settings.

settings of the supplemental engine

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.

uncheck all 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.

rename the search engine

Also, as you can see, there is a Keyword Stems feature enabled by default.

check keywords stems

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.

press done to save the 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.

the list of attributes

You can change the relevance weight of an attribute by moving the slider next to it to the left or right.

the adjustment slider

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:

move the title slider all the way right

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.

click add remove attributes

Here you can choose which attributes, custom fields, or taxonomies the search engine should consider when performing a search.

manage attributes

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:

add the post type custom field

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.

press done to save the attribute

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.

click edit rules

There are no rules by default, so click Add Rule to see what rules you can apply.

click add new rule

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:

add a rule to search only in the WordPress category

When you’re done editing the rules, click Done to save the changes.

press done to save the rules

Press the Save Engines button at the top right once you’ve finished customizing your new search engine.

press save engines

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.

download the Shortcodes extension

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.

click add a new page

Set a title to your new page and click the Plus button.

title your page and press plus

Search for the Custom HTML block and then click on it to add it to the page.

click custom html block

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.

press publish

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.

press view page

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.

press find results

As you can see, there are only posts from the “WordPress” category, which means our custom search form works just fine.

we found only posts related to WordPress

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.

Want to make your search awesome right now?

More than 30,000 sites have chosen SearchWP!

You can utilize all of the content that’s gone unrecognized by native WordPress keyword search instantly with SearchWP.

Get SearchWP for just $99

  • Committed Support
    If you need help, support is fast, friendly, and here for you
  • Streamlined Setup
    Installation and setup that’s optimized for speed
  • Great Documentation
    Helpful, clear, and usable documentation is a priority

See what SearchWP customers have to say

  • “Faster and more easily extensible than other solutions, and much simpler and cheaper than offsite search services (Swifttype, Algolia, custom Elasticsearch engine, etc.). Phenomenal support too! Our client was very happy with the end product.”

  • “With SearchWP, you can add weight to categories, tags, taxonomies and even custom fields. This yields a much better and richer search than the basic WP search. My clients love it.”

  • “I’ve been using WordPress for several years now and I’ve had some fine customer service experiences & a whole lot of bad ones, but until today I’d never had a great one. Unparalleled communication. Above and beyond effort in problem solving. The Best”

[wpforms id="3080"]