OptinMonster Logo

How to Create a Custom WordPress Search Form

Last updated on

by

how to create a custom wp search form

Looking for an easy way to add a custom WordPress search form?

Search forms help visitors find the content on your website. It makes content discoverability easy, which in fact boosts user experience on your website.

In this tutorial, we’ll show how you can easily create a custom WordPress search form in just a few steps.

Why Do You Need A Custom Search Form?

Search is one of the primary ways visitors navigate the Internet. Visitors who find what they need quickly are more likely to stay on your site. Visitors who stick around can then join your email list, purchase a product, or take some other step in your sales funnel.

Unfortunately, the regular search function on WordPress only searches post titles and content. Custom fields, product details, and other important information are completely ignored. The default search function also can’t search by category and subcategory.

All of this other post information could help your visitors find their way through your site better and reduce your bounce rate. So how do we get this data into WordPress search?

The solution is to create a custom search form. We’ll show you how in the next section.

Creating a Custom WordPress Search Form

searchwp

SearchWP is the best WordPress search plugin. It’s easy to use and comes with powerful search features missing in the default WordPress search widget.

SearchWP plugin replaces the default WordPress search widget and easily integrates with popular themes and page builders without any extra effort needed.

It’s the most advanced search plugin available, and more than 30,000 business owners use SearchWP on their websites.

Here are some of the vital features that make SearchWP stand out from the competition:

  • Live Search Results: Live search results make it easier to see all the matching results in the same place without navigating to a different search results page.
  • Autocomplete Search: SearchWP offers to autocomplete search feature similar to Google and Bing search engines.
  • Custom Fields Support: You can search for the matching results within custom fields missing in the default WordPress search widget.
  • Search Algorithm: Create a customizable search engine that displays results based on your inclusion and exclusion rules.
  • Search Analytics and insights: Get complete access to the analytics reports and check what visitors search for.

And many more.

Let’s get started with the actual steps to add a custom WordPress search form.

Step 1: Add the SearchWP Plugin

Our first step is to set up the SearchWP plugin.

For that, you need to visit the plugin pricing page and signup for an account. SearchWP is available in three different pricing plans.

pricing plans

We’ll be opting for the SearchWP Pro plan because it unlocks many powerful extension plugins.

Once you select the plan, go ahead and complete the purchase process.

Next, log in to your SearchWP account and click on Download SearchWP. Now you can install the plugin on your website and activate it.

download searchwp

It’s time to activate the license key.

Navigate to Settings » License and enter your license key.

enter-license-key

Click on the Activate button.

Next, we can move on to downloading the SearchWP Shortcode extension.

Step 2: Install the SearchWP Shortcode Extension

SearchWP plugin provides shortcodes for adding search forms on your website. Shortcodes simplify adding a search form, and anyone without technical knowledge can easily follow this method.

Let’s go ahead and install the SearchWP Shortcode Extension plugin.

You can download the extension from your account by going to the Extensions menu.

Scroll down on the page and click on the Shortcodes plugin.

Next, click on the Download available with active license button.

shortcodes searchwp

Now, you can install and activate the extension plugin like installing any other plugin.

That’s it.

We can go ahead and create your first SearchWP search engine.

Step 3: Create a Search Engine

SearchWP allows you to create a customizable search engine. You’re in complete control to display the search results and even rank them in a specific order.

Let’s proceed to build your first search engine.

Navigate to the SearchWP menu » Settings » Engines and click on the Add New button.

Add new search engine

This will create a new search engine called supplemental. You can easily change the name by going to Sources & Settings.

Here, you can select the sources like posts, pages, custom post types, taxonomies, comments, and so on. SearchWP will try finding the matching results in these places whenever a visitor searches for something.

sources popup

There’s also something called Keywords Stems, which is selected by default. Keyword Stems look for word matching results even if the exact words are not found on your website.

You can change the search engine name by entering your preferred name in the Engine label field. We’ll keep it untouched for the sake of this tutorial.

engine label

Click on the Done button once you’ve configured the settings.

Next, we need to specify the attributes of your search engine. Attributes refer to the title of a post, excerpt, slug, and the content part.

attributes

Go ahead and click on the Add/Remove Attributes button. It will open a popup wherein you can check the post attributes.

attributes popup

Click Done once you select the attributes.

If you want to add some specific search rules, you can use the Edit Rules feature. This feature helps you determine the inclusion and exclusion rules for search terms.

edit rules

For example, you can create rules for searching only in specific taxonomies like categories and tags or posts published within a particular date range.

edit rules popup

While setting the conditions for search results, you might have noticed the sliders available in the settings. These sliders set the search relevancy and display results as per the relevancy range.

save engines

Finally, you can click on Save Engines to save your engine.

Step 4: Add the Search Form to Your Website

The last step is to add the search form shortcode to your website.

You can add the search code within posts, pages, navigation menu, and sidebar.

Let’s add the search form on a post or a page.

Open the post where you want to add the search form. Click on the + Add icon to add an HTML block.

custom html

Copy the following code in the custom HTML block.

[searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"]

<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>

Click on the Publish or Update button to save the changes.

Open the post, and you should see the newly added search form.

Here’s how it looks in the front.

search

It’s time to check the working of the form.

For example, we’ll search for WooCommerce.

wc search result

After performing the search, we received all the matching results in just a few seconds.

That’s it.

You’ve successfully added a custom WordPress search form to your website.

Since SearchWP offers plenty of extension plugins, you can check more details about the integrations and easily extend the core functionality of the search form.

We hope you liked this easy to follow tutorial. If you did, don’t forget to check the below articles to improve the search features on your business website.

What are you waiting for? Get started with SearchWP today!

If you liked this tutorial, follow us on Facebook and Twitter for more free WordPress tutorials.


Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

CTA background
CTA thumbnail

Over 70% of visitors who abandon your website will never return! Learn how to unlock the highest conversion revenue from each of your website visitors!

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

1
1
1

Enter all the Optin Gallery Pages here

Enter each choice on a new line. For more control, you may specify both a value and label like this: red : Red

Enter each choice on a new line. For more control, you may specify both a value and label like this: red : Red

1

Blog Sidebar Campaign Form

Popular Posts

Connect with us:

Start Getting More
Leads & Sales Today
with OptinMonster!

Popups work, and you can get started for a few bucks a month. What are you waiting for?

Create and launch smart capture forms
today in minutes. What are you waiting for?