Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Create a Custom WordPress Search Form (Step by Step)

Do you need to create a custom search form for your WordPress website?

Search is how most users will find content on your site. If they can’t easily find what they are looking for, then they may move on to another website.

In this article, we’ll show you how to improve your website search by creating a custom WordPress search form, step by step.

How to Create a Custom WordPress Search Form (Step by Step)

Why Create a Custom Search Form for WordPress?

The default WordPress search feature is quite limited and doesn’t always find the most relevant content.

As you add more content to your site, you’ll need better ways to help your website visitors easily find the content on your site.

This becomes even more important if you’re running an online store or a membership site where you want users to find the right product or course.

You may also want your website’s search to prioritize some content over others, so that it appears higher in the search results. For example, you may want to show your site’s most popular content at the top of the search results page. To do this, you’ll need to customize your website’s search algorithm.

You may even want to change how the search form looks on your website so it better matches your branding.

That being said, let’s take a look at how to customize the WordPress search form and results page, step by step.

How to Customize WordPress Search Form and Results

The easiest way to create a custom WordPress search form is by using SearchWP.

SearchWP is the best WordPress search plugin. It’s easy to use and gives you complete control over your search results. It’s also more accurate than the default WordPress search.

The first step is to install the plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » SearchWP page and then click on the ‘License’ menu option.

Enter SearchWP License Key

Then, enter your license key in the ‘License’ box and click the ‘Activate’ button. You can find the license key by logging into your SearchWP account.

Customizing the Search Engine

After that, you can create a new search engine by clicking on the ‘Engines’ menu option.

Once here, go ahead and click on the ‘Add New’ button.

SearchWP Add New Engine

This will create a new search engine called ‘supplemental’.

To change the default name, simply click the ‘Sources & Settings’ button.

SearchWP Supplemental Search Engine

In ‘Engine Label,’ type in the name you want to use for the search engine.

We’re going to use ‘Custom,’ but you can call the search engine anything you want.

SearchWP Engine Label

In this popup you can also choose whether you want to include posts, pages, media files, comments, and users in your search results. We’ll leave the default settings as they are.

You’ll also notice that ‘Keyword Stems’ is selected by default. This helps you show relevant results by including words that don’t have the same ending. For example, if you search for ‘run’ then keyword stemming makes sure that ‘run,’ ‘running,’ and ‘runners’ are all included in the search results.

When you’re happy with the information you’ve entered into the popup, click on ‘Done.’

On this page you’ll now see sections for Posts, Pages, Media, and any other sources that you selected in the popup.

In each section, you can set the priority for the different attributes using the ‘Applicable Attribute Relevance’ sliders.

These change how the search engines value and rank content. For example, if you want the post title to carry more weight than the content, then you should drag the sliders accordingly.

In the following image, the search engine will place more value on matches that it finds in the post title, compared to matches that it finds in the post’s content.

SearchWP Attribute Relevance Sliders

You can also create rules that determine whether certain content is included or excluded from the search results.

For example, if you have an online store then these rules can help customers find other products in the same category.

To create your first rule, go ahead and click the ‘Edit Rules’ button in the ‘Posts’ section.

Editing your SearchWP rules

You’ll see a popup letting you know that the search engine currently doesn’t have any rules.

To go ahead and create your first rule, click on the ‘Add Rule’ button.

Adding a search rule to SearchWP

You’ll notice that you can create rules about the post’s categories, tags, format, publish date, and the post ID.

You can now create a rule using the different dropdowns and fields.

SearchWP Edit Rules

You might want to let your visitors search specific categories. For instance, you can add a category search feature to your archive pages to help your visitors quickly find what they’re looking for.

To learn how to do that, please see our guide on how to search by category in WordPress.

Once you’re happy with how your rule is set up, click on ‘Add Rule.’

To create more rules, simply repeat the exact steps described above. You can also create rules for other content types such as media and pages, by scrolling to their sections and clicking on the ‘Add Rule’ button.

When you’re happy with how your custom search engine is set up, click on the ‘Save Engines’ button at the top of the page to create your custom engine.

Click the Save Engines Button

If you see a message asking you to rebuild the index, then click on the ‘Rebuild Index’ button.

Adding the Search Form with Shortcode

The SearchWP Shortcodes Extension makes it easy to add your new custom post search form to your WordPress blog or website.

Simply visit the SearchWP Shortcodes Extension website and then click the ‘Download available with active license’ button.

Download SearchWP Shortcodes Extension

After that, you need to install and activate the extension in exactly the same way you installed the SearchWP plugin.

Now you can add a custom search form to your posts, pages, and widgets using shortcodes. If you haven’t used shortcodes before, then you can learn more in our beginner’s guide on how to add a shortcode in WordPress.

Simply edit a post and place your cursor where you want to add the search form. After that, click the plus ‘+‘ Add Block icon to bring up the blocks menu.

Add a Custom HTML Block

Next, type ‘html’ into the search box and then click on the ‘Custom HTML’ block to add it to the post.

Once you’ve added the new block, paste the following shortcodes and HTML into it.


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

This code will add your custom search form to the post, create a section to display the search results, show a no results message if necessary, and add pagination if the results cover multiple pages.

If you gave your search engine a different name, then you’ll need to change the four times that the code saysengine=“custom”so that it uses your engine’s name instead.

By default, the code creates a search button that shows a ‘Custom Search’ label. If you want to use a different label then simply change the text inbutton_text=“Custom Search”.

Finally, make sure you click Publish or Update to save your post and make it live.

Click Publish or Update to Save Your Post

To see the search form in action, simply visit the post on your WordPress website.

This is how it looks on our demo site running the Twenty Twenty-One theme.

SearchWP Custom Search Form Preview

Adding Live Ajax Search

Live Ajax search improves your search form by automatically showing search results as the user types their query.

This is similar to how search engines such as Google work.

Live Search Page Example

The easiest way to add Ajax live search to WordPress is by using the free SearchWP Live Ajax Lite Search plugin.

For step by step instructions on how to install it, see our guide on how to add live Ajax search to your WordPress site.

Using Advanced Settings for SearchWP

Next, it’s a good idea to enable some settings that will make it easier for users to find what they are looking for.

To do this, navigate to Settings » SearchWP and click on the ‘Advanced tab.’

SearchWP Advanced Settings

You can now click to check any of the options that you would like to use on your site:

  • Partial matches will display results that don’t quite match the term that the visitor is searching for.
  • Automatic “Did you mean?” corrections will suggest a slightly different search term that will match more posts on your website.
  • Support “quoted/phrase searches” will allow your users to use quotes when searching for exact phrases.
  • Highlight terms in results will make it easier for your visitors to find what they are looking for in the search results.

Styling the Search Form and Results Page

Your WordPress theme controls how your site looks, including the appearance of the search form and search results page. They store the formatting rules for all elements of your WordPress site in a CSS stylesheet.

You can override your theme’s style rules by adding custom CSS.

If you haven’t done this before, then see our article on how to add custom CSS in WordPress for beginners.

For example, here is some custom CSS that will work with most themes. The first section changes the style of the search form and the second section customizes the search results.


.searchform {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#ffffff;
border:1px solid #61c3c0;
padding:10px;
height:90px;
width:600px;
}

.search-results {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#000000;
border:1px solid #61c3c0;
padding:10px;
width:600px;
}

You can change the formatting in the code to suit your own site. You can also delete any lines that you don’t want to use. For example, if you don’t want to change the search form’s height and width, then simply delete those lines.

Here are screenshots of our demo website before and after adding the custom CSS.

SearchWP Custom CSS Preview

Measuring Search Results and Improving Conversions

Once you have set up your custom WordPress search form, it’s a good idea to measure the results. This will allow you to better understand what visitors are searching for and spot any problems they may be having with your site’s custom search form.

SearchWP comes with a search metrics extension that shows you exactly how your website search is performing.

SearchWP Metrics

You can also use the search metrics to improve the search results by finding the content that gets the most clicks and placing it at the top of your search results.

Ecommerce websites can also use exit-intent popups and gamified spin a wheel campaigns to make their search pages more engaging and convert visitors into email subscribers.

OptinMonster spin to win popup example

We hope this tutorial helped you learn how to create a custom WordPress search form. You may also want to see our expert pick of the best business phone services for small business, and our comparison of the best domain registrars.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

Comments

  1. Congratulations, you have the opportunity to be the first commenter on this article.
    Have a question or suggestion? Please leave a comment to start the discussion.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.