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.
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.
Next, press the Download SearchWP button and save the plugin’s ZIP file to your computer.
After downloading, copy the license key in the bottom left corner.
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.
Then, paste your license key into the License field and click Activate to activate your copy of SearchWP.
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.
On this tab, you can find all the search engines you create with SearchWP.
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.
After that, there will appear 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.
Then, uncheck all search sources except Posts.
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.
When you’re finished customizing your search engine settings, press Done.
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.
Next, press the Add/Remove Attributes button.
On the appeared window, you can specify what post custom fields and taxonomies you want WordPress to consider when performing a search.
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.
Now, let’s enable search by post tags. First, click on the Taxonomies field.
Next, find the Tags taxonomy and click on it.
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.
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.
Next, click Rebuild Index to make WordPress reindex all your posts and pages.
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.
Then, find the Shortcodes extension and click Install.
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.
After you get to the page editor, enter the name of your page. For example, we’ll call it Search for tutorials.
Next, click on the Plus button.
After the blocks window appears, click the Custom HTML block to add it to your page.
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.
Then, click View Page to check out your new search page with a custom search box.
Here is how this page looks on our test site:
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.
As you can see, we only find our single post that’s placed within the Tutorials category.
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.
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.
