How to Create a Custom WordPress Search Form (In 3 Simple Steps)

Chưa được phân loại

Search is a key part of the online experience, and it’s how most users find information on the web. As such, if a visitor arrives on your site and can’t immediately find what they’re looking for, there’s a good chance they may leave without digging further. A WordPress search form can help make sure that doesn’t happen.

By implementing a better search feature on your site, you can help users find what they need faster and simultaneously reduce bounce rates. It’s a win-win situation for everyone involved.

In this article, we’ll discuss the importance of your site’s internal search and show you how to add a search form to your website. Then we’ll walk you through how to create your own custom WordPress search form in three steps. Let’s get started!

Why your WordPress search form is important

Search is a dominant force on the web. It’s how the vast majority of users find new content and sites to visit – and we’re all familiar with the importance of search engine optimization (SEO) when it comes to being found online.

However, not as many website owners consider the prominence of search on their own sites. After all, a main menu can seem like all the navigation visitors might need.

However, if users land on your site and can’t find what they’re looking for quickly, they may not stick around. This is especially critical if they came from a Google search, since there’s a whole list of likely competitors just a Back click away.

Having a useful and accessible internal search form helps prevent users from prematurely leaving your site. This means fewer losses to the competition and more chances to convert visitors into subscribers, customers, or fans.

Similarly, if you have hundreds or thousands of blog posts published, it can be tough for users to sift through and find articles on specific topics. A search function can improve the user experience (UX) of your site and leave visitors more satisfied, which is ultimately good for business.

How to add a search bar to your site (two methods)

The default WordPress installation includes a search bar widget that can be added to widget-capable areas of your site, such as the header, footer, or sidebar. There are two methods for adding this widget:

  1. Through the WordPress Customizer.
  2. Directly from the dashboard.

1. Add a search form using the WordPress Customizer

To add the search form using the Customizer, head to your WordPress dashboard and navigate to Appearance → Customize. Click on Widgets in the Customizer sidebar.

This will open a new menu with a list of the widget areas on your site and the elements each one currently contains:

To add the search bar to a widget area, click on the Add a Widget button in the area where you want to place it. In the new menu that slides out, scroll down to and select the Search widget:

Adding the Search widget in the WordPress Customizer.

This adds the widget to the end of the list:

The Search widget placed at the end of the footer section.

You can then drag it to a different spot to reposition it. For example, dropping it at the beginning of the list will move it to the far left of the widget area.

You can also add a title to the search form by filling in the Title field. This includes a small header above the search box:

The WordPress search form with a custom title.

When you’re finished, remember to save your changes. You can do this by clicking on the blue Publish button at the top of the Customizer menu.

2. Add a search form from the WordPress dashboard

If you prefer, you can also add the search form directly from the WordPress dashboard. To get started, navigate to Appearance → Widgets to open the widget editor screen:

The Widget area of the WordPress dashboard.

From there, simply find the Search widget in the list and drag it to the area you want to display it in:

The WordPress search form added to the footer of the site.

You get access to the same options here as in the Customizer. You can reorder the widget to change its position or add a title if you wish.

The only difference is that the Customizer provides a visual preview of your changes. If you decide at any time that you’d rather use the Customizer, just click on the Manage with Live Preview button at the top of the screen to open it up.

Note that the specific widget areas available on your site are controlled by your theme, and not every theme includes the same options. For example, the default WordPress Twenty Twenty-One theme only offers the footer as a widget area.

How to customize the default WordPress search form manually

Unfortunately, the default WordPress search form doesn’t come with many customization options. You can change its position and add a title, as outlined in the above sections, but that’s all that’s available using the interface.

However, since we’re talking about WordPress, there’s a way around this: editing the code directly. By using WordPress template files, you can create a custom search page for your site. If you want to do this, WordPress.org has a fantastic walkthrough.

However, even with this method, the default WordPress search function is still limited. You can only place the form in widget areas, and the appearance is based on your theme, which may not offer much in the way of customization options. Fortunately, there are easier ways to customize your search form – namely, by using WordPress plugins.

How to create a custom WordPress search form with a free plugin

If you want to create a custom WordPress search form and aren’t comfortable with code (or just don’t have the time for it), you can use a free plugin instead. In this section, we’ll walk you through creating a custom search bar using the Ivory Search plugin.

1. Install and activate the Ivory Search plugin

The first step is to head to your WordPress dashboard and install Ivory Search:

This is a free plugin that helps you create a custom search form for your WordPress site. You can adjust the appearance of the search bar, place the form in your site’s menu, and fine-tune what content appears in the results.

Go ahead and install the plugin from your WordPress dashboard. Once you have it activated, you can proceed to the next step.

2. Create a new search form

After activating the plugin, you can create your first search form. From your WordPress dashboard, navigate to Ivory Search → Search Forms:

Adding a new search form in Ivory Search.

The plugin will automatically populate the form with its default settings, so you can get started quickly if you like. However, you can also customize the settings thoroughly.

Under the Search tab, you can specify what content on your site you want to include in searches. Click through each section to check and uncheck various post and page types:

Selecting which types of content to include in the custom WordPress search form.

The Exclude tab lets you select specific posts and pages that you don’t want to be included in the search results. This is handy for excluding certain index pages, for example.

The Design tab is where you can customize the appearance of the search form:

The Design section of the Ivory Search settings.

You may need to click on the Enable Search Form Customization checkbox to activate the customizer (it’s off by default). Once you’ve done that, you can click on the Search Form Customizer link to open the WordPress Customizer:

Customizing the WordPress search form in the Customizer.

There, you can select the style of the search box itself, as well as the colors and text used for various elements, such as the placeholder text contained inside the box. When you’re finished, make sure to click on the Publish button at the top of the page.

Finally, the Options tab is where you can configure the search results page:

Customizing the WordPress search form in the Ivory Search settings.

There are options for the number of results per page, whether you want search terms highlighted, and several other advanced options. When you’re finished configuring your form, click on the blue Save Form button to finalize your changes.

3. Add the search form to your site

With your form configured, you’re now ready to add it to your website. You can place the form in your header, footer, or WordPress menu.

To add your Ivory Search form to the header or footer of your site, navigate to Ivory Search → Settings:

The Ivory Search settings screen.

Next, select either Header Search or Footer Search from the list, and then click on the form you just created from the drop-down menu:

Adding the custom search form to the WordPress header.

When you’re finished, click on Save to update your site. In this case, we’ve added the bar to our header:

The custom search form displayed in the WordPress header.

If you want to add the search form to your site menu, navigate to Ivory Search → Menu Search:

Adding a custom search form to the WordPress menu.

On this screen, you can choose the menu you want to include your search bar in. The plugin will add a small magnifying glass to the menu. Clicking on the magnifying glass pops up a search box where terms can be entered:

The custom search from displayed in the WordPress menu.

That’s it! You’ve now customized your own WordPress search form.

Conclusion

While WordPress includes a search bar by default, it’s limited in where it can be placed and how it can be tailored. Using a plugin such as Ivory Search lets you easily create a fully custom form and display it nearly anywhere you want in just a few steps.

For some other ideas to improve search on your site, check out our tips for improving WordPress internal search.

Do you have any questions about creating a WordPress search form? Let us know in the comments section below!

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai.