WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

Step by Step guide on How to Create a Custom WordPress Search Form

Last Updated on November 27th, 2023

Tags: , ,

Custom WordPress Search Form

In this beginner-friendly step-by-step tutorial, we’ll show you how to create a custom WordPress form that can help users discover your content more easily. 

Below, you’ll discover multiple ways to add dynamic search functionality to your site using either the basic WordPress website builder, a standard widget, plugins, or, for the more advanced among you, custom coding. 

Why Create a WordPress Custom Search Form? 

Whether you’re building your own WordPress theme, and you want to deliver an added benefit that will attract customers, or you’re a website owner looking to grow your online brand, there’s really only one fundamental reason why you’d want to add a search form to WordPress:

Improve the on-page experience for end-users. 

The larger a website grows, the more complex and in-depth its structure and hierarchy become. As it does so, it becomes increasingly difficult for site visitors to find the exact content they’re looking for, especially if it’s buried somewhere among a myriad of sub-menus. 

Adding search functionality helps to tackle that problem, allowing visitors to enter keywords and easily discover what they need in the same way that they’d use a major search engine such as Google.

When your content is as easy to find as possible, that results in happier visitors, and more pleased visitors result in more eCommerce sales, more leads, and improved brand reputation. 

Of course, you don’t need a large-scale website to benefit from WordPress search. 

Regardless of the size of your site, improving the site navigation and overall user experience keeps visitors engaging with your site for longer, and that can have a profound positive effect on your WordPress SEO

Article Continues Below

The more time visitors spend interacting with your content, the lower your bounce rates and the stronger the signal you send to Google about your website’s relevance and quality.

Ultimately, this can boost your search rankings, driving more traffic to your site and helping you achieve your goals, whether that’s more sales, subscribers, or clicks on your ads and affiliate marketing links

Convinced? 

Then, let’s dive in and show you how it’s done. 

How to Create a Custom WordPress Search Form

1. Use WordPress Forms Widgets

As we’ll discuss in more detail later, this first strategy is far from perfect, but it is the best option if you’re looking for the simplest, most novice-friendly way to add a search bar to your WordPress theme. 

WordPress Forms Widgets

To do this, log in to WordPress, navigate to Appearance – Widgets, and look for the Add Block button, a white rectangle with a plus (+) symbol in the middle. 

Search block. 

You can then use the block menu to find and select the Search block. 

From there, there are a few rudimentary customizations you’re able to make. 

By clicking on your new search bar, you can use the menu options to: 

Article Continues Below

A. Realign the search bar

Realign the search bar

This ensures it fits perfectly within your responsive WordPress theme. 

B. Edit and Toggle the Label 

By default, the search bar is labeled “Search.” However, you can change this simply by clicking on the text and typing over it to replace it with something better in keeping with your brand. 

 Toggle the Label 

Alternatively, if you’d prefer not to have a label at all, you can simply switch it off altogether. 

C. Change the Button Position and Style 

You can tweak the layout of your search bar by repositioning the button inside or outside of the overall search box. 

Button Position and Style 

You can also use this option to get rid of the search button and just have the box itself, though we strongly recommend not using this option as it negatively affects the usability of your WordPress forms. 

icon-based label

Assuming you decide to keep the button visible, you can also choose between a text or icon-based label for it. 

D. Move the Search Form to Another Area 

The top-right corner of a website and the top of a site’s sidebar are the two locations users primarily expect to find a search box on WordPress. 

Article Continues Below

site's sidebar

If yours isn’t in either of those locations, or if you have some specific reason why you want to move it from the standard position to another area, you can do that by tapping the winding arrow icon and selecting a different location. 

As we’re sure many long-time WordPress users will agree, this is a far easier way to reposition widgets than using the old drag-and-drop method to arrange your site’s features. 

Unfortunately, that’s where the customizations end. At least within WordPress itself. 

At the time of writing, there’s no way to change the colors or other styling features of the default search form in WordPress, nor is there any immediately obvious way to configure how the back-end search algorithm works. 

Told you it wasn’t perfect, didn’t we? 

2. Add a Search Form Using WordPress Site Editor Templates

If your theme supports the recently updated WordPress Site Editor, you can use this to add a search form to your site’s post and page templates. 

This is a particularly good option if you only want to offer search functionality on certain types of content, such as blog posts. However, since all it does is provide another way to incorporate the search widget described above, it’s bound by the same limitations on customization. 

Appearance - Editor

To use this method, first select Appearance – Editor from your WordPress dashboard. 

design menu

Next, select templates from the design menu. 

blog homepage

You can then select the template you wish to add a search form to. In this example, we’re going to use our blog homepage to help visitors find the subjects they’re most interested in from our vast catalog of posts. 

pencil to open up your page in the editor

Click the edit pencil to open up your page in the editor. 

location on your page

You can then choose the location on your page template to add a search box using the blocks menu, and customize it in the same way as outlined above. 

3. Create a Custom WordPress Search Form Using a Plugin 

If you want more flexibility over your WordPress search form, there are countless plugins out there which provide exactly that. 

Among the best of the bunch is Ivory Search, a simple yet effective tool that comes in free and premium versions and allows you to create unlimited highly customizable search forms. 

Here’s how it works: 

Ivory Search

After installing and activating the plugin, selecting Ivory Search from the dashboard menu will bring you to a number of pre-made search forms. 

Add New Search Form

You can choose to edit one of these or, as we’re going to do in this example, create one from scratch by selecting Add New Search Form

On the next screen, give your new WordPress form a name and hit Save

You then have multiple options to configure, including: 

A. Searchable Content

Here, you can fine-tune every aspect of the way your WordPress installation’s internal search algorithm works by: 

Searchable Content

Selecting which post types to include: 

specified’ posts

Allowing only ‘specified’ posts to feature in the search. 

specific categories

Allowing only content labeled with specific categories, tags, and terms to be searchable. 

 personally selected pages

Choosing whether to include all pages in the search or just ones you personally select. 

site's search results

Determining how your content will be displayed in your site’s search results. 

B. Excluded Content 

You can further control your site search by opting to include specific content or types of content. 

For example, let’s say that you have 500 blog posts, and you want 498 of them to be searchable. 

One option would be to use the search-only selected posts option illustrated above and then manually add the 498 posts, but let’s be honest, that’s far too cumbersome and time-consuming a task for any busy WordPress user. 

Exclude tag

A quicker option would be to allow all posts to be searched initially, then simply flip over to the Exclude tag, and remove the posts you don’t want users to find through search. In this example from our test blog, you’ll see that we’ve highlighted the default Hello World! post. 

C. Search Form Design 

You can also tap the Design tab and click Search Form Customizer to access a number of styling options. 

Search Form Customizer

This doesn’t just include options for the form style and placeholder text.

placeholder text

It also allows you to completely customize the colors to fit in with your site’s branding, something which may strongly appeal if the default WordPress forms stick out like the proverbial sore thumb. 

text box background

D. AJAX Search

Ivory Search allows you to enable AJAX search, and configure how its results are returned. 

enable AJAX search

Using AJAX search means that relevant products are automatically displayed as a user begins to type their search query. 

This makes it an ideal choice for eCommerce store owners, as potential customers can immediately see matching products, and click through to the right product page without having to browse through a page of search results. 

E. Customizable Search Results 

Finally, you can tap on the Options tab to further customize how the search functionality works. 

Options

Here, you have basic options such as the ability to set how many posts are displayed on each page of search results, as well as changing the order in which results are displayed.

Fuzzy Matching

However, there are some pretty useful advanced features here too, such as Fuzzy Matching, which lets you decide whether search results should be returned for full or partial-match keywords. 
As you go along customizing your form, be sure to hit save after every change you make.

WordPress using the shortcode

When you’re done, you can add your new customized search form to WordPress using the shortcode provided at the top of each page. 

If you’re not sure how to do that, our guide to WordPress custom shortcodes will teach you everything you need to know. 

4. Customize Your WordPress Code 

If the default search form isn’t enough for you, but you’d rather not bog your site down with any more plugins, your final option is to use code. 

This option is only really suitable for advanced WordPress users who know their way around PHP. 

Theme Files menu

You can first go to the Theme File Editor if that sounds like you. You should see two files in the Theme Files menu if your theme supports search. 

A. search.php – A template for displaying search results 

B. Searchform.php – A template for displaying the search form. 

Copy the existing code from these files into a text editor to create a safe backup in case something goes wrong, then use your PHP coding knowledge to make your desired changes. 

If you don’t see either of these pages, you can always create your own custom WordPress page to display your search results using PHP. 

WordPress itself has a detailed tutorial showing you how to do this. 

5 More Top WordPress Search Form Plugins 

PLUGINBEST FORPRICE
1.SearchWPCustomizing WordPress search algorithm$99 – $399 p/y
2.Advanced Woo SearcheCommerce searchFree
3.ElasticPressIncluding PDFs, documents, and custom fields in search results.$79 – $699 p/y
4.AJAX Search LiteAdding AJAX-powered searchFree
5. WP Extended SearchBeginner-friendly search customizationFree

What is the Best Way to Add A Custom Search Form to WordPress? A Summary

If you’ve read this entire guide, you should hopefully have a good understanding of what a big difference such a small feature as a basic search form can make towards improving the usability of your website, and the kind of knock-on benefits that can deliver in terms of happier customers and improved SEO. 

You’ll also know there are multiple ways to do this, but which of these methods is right for you? 

Ultimately, that all depends on two factors: your requirements and your level of WordPress expertise. 

For those of you looking to keep things as simple as possible, using the Widgets page or WordPress Site Editor to add a basic search block should be more than enough. Meanwhile, more advanced users can either customize that form by editing the search.php and searchform.php or create a WordPress custom page from scratch to display their results. 

With that being said, plugins such as Ivory Search offer the best of both worlds – a beginner-friendly way to add a search form to WordPress with the advanced controls that the platform’s default search function sadly lacks. 

Finally, for more tools to help you deliver optimum user experiences, check out the best plugins for a mobile-friendly WordPress site

A team of WordPress experts that love to test out new WordPress related software, WordPress plugins and WordPress themes.