SearchWP

News

Do you want to know how to add a search box to a WordPress page?

It’ll encourage your visitors to perform a search, boost your content discoverability, and increase the number of pageviews you get.

From this guide, you’ll learn how to add a search box to your pages in a few clicks, even if you’re a complete newbie to WordPress.

Let’s begin!

Benefits of Adding a Search Box to a WordPress Page

Adding a search bar to your pages will help you:

  • Get more pageviews. When visitors see a search bar in a blog post or page, there is a great chance they’ll use it, especially if you motivate them to do that.
  • Boost your content discoverability. Give your content with low view counts another chance to be discovered.
  • Deliver more relevant search results. Help your visitors faster find what they’re looking for by limiting your search boxes to specific content types or categories.
  • Increase the average session duration. The more of your content visitors explore, the longer they stay on your site.
  • Rank higher in search engines. A high average session duration is a strong signal to Google that your site is worth getting better positions in search results.

With that, let’s see how you can add a search box to a page in WordPress.

How to Add a Custom Search Bar in WordPress

The easiest way to add a custom search bar to your WordPress pages is to use a plugin like SearchWP.

SearchWP logo

This is the most beginner-friendly WordPress search plugin that comes with a ton of useful features.

With SearchWP, you can completely customize the work of search on your site to meet your business goals.

For example, you can change the order of search results, limit search to only posts, add live autocomplete search, and many more.

And that’s just a short list of the plugin’s features!

SearchWP also allows you to:

  • Track searches of your visitors. This way, you can find out what your audience is interested in and give them the content they want.
  • Add multiple search forms to your site. It allows you to create custom search forms for specific needs and place them across your site.
  • Highlight search terms in search results. It makes it easier for your visitors to recognize if they’ve found what they’re looking for in your search results.
  • Enable fuzzy search on your site. Due to that, your visitors will find the right content, even if they make a typo in a search query.
  • And many more…

Over 30,000 website owners already use SearchWP to enhance their search and deliver more relevant search results to their visitors.

Ready to join them? Then, let’s see how you can use this plugin to add a search box to your pages.

Step 1: Install SearchWP

To get started, get your copy of SearchWP here.

Once done, head over to your SearchWP account and click Downloads.

go to the Downloads tab

Next, press the Download SearchWP button and save the plugin’s ZIP file to your computer.

click Download SearchWP

After downloading, copy the license key in the bottom left corner.

copy your license key

The next step is to install and activate the SearchWP plugin on your WordPress website.

First, upload the downloaded ZIP file to your site. You can check out the how to install a WordPress plugin tutorial if you need help with that.

After installing SearchWP, navigate to your WordPress dashboard, point your cursor over the SearchWP button at the top bar and click Activate License.

click Activate License

Then, paste your license key into the License field and click Activate to activate your copy of SearchWP.

click Activate

Upon the plugin’s activation, you’re ready to customize your search engine.

Step 2: Add a New Search Engine to Your Website

To get started, go to the Engines tab in your SearchWP settings.

go to the Engines tab

On this tab, you can find all the search engines you create with SearchWP.

the list of your search engines

Currently, there is only the Default search engine that SearchWP automatically creates after the installation. It’s connected to every existing search form on your site.

WordPress considers search engines as a set of rules to follow when performing a search. You can customize these rules to change how search works over your site.

For example, you can make WordPress index custom fields, exclude specific pages from search results, enable search by post tags, and many more.

The best thing is that SearchWP allows you to create multiple search engines and link them to individual search forms.

This way, you can create custom search forms with a unique set of rules. It’ll help you narrow search results and allow your visitors to find what they’re looking for faster.

In this tutorial, we’ll create a search engine, customize it, and link it to a search box, which we’ll then add to a separate page.

To get started, we’ll need to create an additional search engine. You can do that by clicking the Add New button.

add a new Search Engine

After that, there will appear the Supplemental search engine.

the Supplemental search engine

Step 3: Customize Your Search Engine

First, let’s look at the search sources that this search engine has.

As you can see, there are 4 search sources: Posts, Pages, Media, and Users.

Let’s say we want this search engine to search only among posts. This way, we can clean up search results on our site and help our visitors find the right content faster.

Manage Search Sources

To get started, click the Sources & Settings button.

click Sources and Settings

Then, uncheck all search sources except Posts.

check only Posts source

You can also rename your search engine to make it easier to recognize. To do that, enter its name within the Engine Label field.

For example, we’ll call it the Awesome Search Engine.

rename your search engine

When you’re finished customizing your search engine settings, press Done.

press Done to save your engine

Make Post Custom Fields and Tags Searchable

Let’s also give our visitors the ability to search for posts by tags and custom fields.

To get started, click on the Posts search source to expand its settings.

click on the Posts source

Next, press the Add/Remove Attributes button.

click Add Remove attributes

On the appeared window, you can specify what post custom fields and taxonomies you want WordPress to consider when performing a search.

manage post attributes

There is also a way to make all custom fields searchable automatically if you don’t want to enter them manually.

To do that, click on the Custom FIelds field and choose the Any Meta Key option.

choose the Any Meta Key shortcut

Now, let’s enable search by post tags. First, click on the Taxonomies field.

click on the Taxonomies field

Next, find the Tags taxonomy and click on it.

add the Tags taxonomy

Now visitors of our site can search for posts by their tags and custom fields.

When you’re finished managing the Posts search source attributes, press Done to save the changes.

click Done when you finished managing attributes

Save Your Search Engine

The final step is to save your search engine. To do that, click the Save Engines button in the upper right corner.

click Save Engines

Next, click Rebuild Index to make WordPress reindex all your posts and pages.

click Rebuild Index

After adding a new search engine and customizing it to your needs, the next step is to install the SearchWP Shortcodes extension.

Step 4: Install and Activate the Shortcodes Extension

This extension allows you to add a search bar to your page using shortcodes.

To get started, navigate to SearchWP » Extensions in the left panel of your WordPress dashboard.

go to the Extensions tab

Then, find the Shortcodes extension and click Install.

install the Shortcodes extension

When you installed and activated the extension, you’re ready to move to the final step and add your custom search box to a page.

Step 5: Add a Custom Search Bar to Your WordPress Page

To get started, navigate to Pages » Add New in your WordPress dashboard.

add a new page

After you get to the page editor, enter the name of your page. For example, we’ll call it Search for tutorials.

add a heading

Next, click on the Plus button.

click the Plus button

After the blocks window appears, click the Custom HTML block to add it to your page.

add the Custom HTML block

The next step is to copy and paste the following code into the added Custom HTML block:

[searchwp_search_form engine="awesome_search_engine" var="searchvar" button_text="Find Results"]
  
<div class="search-results-wrapper">
 [searchwp_search_results engine="awesome_search_engine" 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="awesome_search_engine"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="awesome_search_engine"]
</div>

Make sure you replace awesome_search_engine in the above code with the name of your search engine.

This code displays a search box linked to the search engine you customized in the previous steps.

In addition, it shows pagination if there are more than 4 search results on the page and the “No results found” message if there are no search results.

When you finish adding the code, publish your page by pressing the Publish button in the upper right corner.

click Publish

Then, click View Page to check out your new search page with a custom search box.

click View Page

Here is how this page looks on our test site:

how to add a search box to a WordPress page

Let’s also test our search box to make sure it works correctly.

We have many posts on our site related to WordPress in various categories, but only one of them is attached to the Tutorials category.

In one of the previous steps, we limited this search form to the Tutorials category. Let’s see what results we’ll get by searching for WordPress.

click Find Results

As you can see, we only find our single post that’s placed within the Tutorials category.

we found the post

It means that our search box works the way it’s supposed to.

How to Add a Search Box to WordPress Navigation Menu

You can also add a search box to the navigational menu of your site.

It makes it more visible for your visitors and encourages them to perform a search.

add a search bar to the navigational menu

For more details, check out the step-by-step tutorial on how to add a search bar to WordPress menu.

From this article, you learned how to easily add a search box to a page even if you’re a WordPress newbie.

We hope it’ll help you deliver a more convenient way for your visitors to search for content on your site.

Ready to create a smart search box and add it to your pages? You can get started with SearchWP here.

Do you use the Elementor plugin? Check out the beginner’s guide on how to add a search box to the Elementor page.

You may also want to learn more about how to make WordPress search in post content.

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

  • “This plugin was a perfect solution for our client’s needs. The technical support that was provided by the SearchWP team was top-notch and they were extremely responsive to my needs and inquiries. Thank you, Elio and the whole team at SearchWP :)”

  • “2 things I’ve done based on data from SearchWP: create content people searched for that was missing, and customize results for important terms. Being able to see search data and customize results has been awesome!”

  • “The plugin do all what we need – and the support is GREAT! Helped me in many questions and at PHP-code! THANKS!”

[wpforms id="3080"]
[wpforms id="3080"]
[wpforms id="3080"]
[wpforms id="3080"]
[wpforms id="3080"]
[wpforms id="3080"]
[wpforms id="3080"]
[wpforms id="3080"]
[wpforms id="3080"]
[wpforms id="3080"]