Are you wondering how to add a search box to Elementor page?
Adding a search box to your Elementor page allows you to encourage visitors to explore your site. This way, you can effortlessly boost your content discoverability and get more pageviews.
In this article, we’ll show you 2 ways to do that:
- How to Add a Default Search Box Without a Plugin
- How to Add a Smart Search Box With the SearchWP Plugin
Let’s dive into it!
Why You Should Consider Using a Search Plugin
You can easily add a search box to an Elementor page without any plugins. We’ll show you in detail how to do that later in this article.
But there’s a reason why you should consider adding it using a search plugin.
The thing is, the default WordPress search engine is far from perfect. It searches only for titles, content, and excerpts of posts and pages.
That’s a huge disadvantage as there is a lot of information that WordPress ignores when performing a search.
This list includes custom fields, post tags and categories, shortcodes, and many other useful data.
By making these searchable, you can help your visitors find what they’re looking for much faster and improve their user experience.
The easiest way to do that is to use a WordPress search plugin. Using it, you can also customize a bunch of things related to search on your site.
For example, with a search plugin, you can easily:
- Create custom search fields
- Change the order of search results
- Collect data on search activity on your site
- Limit search to specific posts, pages, or categories
- And more!
The best part? Using a plugin takes only a few clicks to boost your site search – no coding needed.
In addition, if you use a plugin, you can always contact its support team and get help from WordPress experts.
This way, you can save money on hiring a web developer if you face any issues adding a search box.
With that said, let’s move on to adding a default search box to your Elementor page without a plugin.
How to Add a Default Search Box Without a Plugin
To get started, navigate to Pages » All Pages in your WordPress dashboard.
Then, hover your cursor over the page to which you want to add the search box and click Edit with Elementor.
Once you get to the Elementor page editor, type “search form” in the Search Widget field on the left panel.
After that, you’ll see the Search Form widget.
Drag and drop it to the spot on the page where you want the search box to appear.
You can see how we do that below:
After you add a search form, click Update at the bottom of the editor to save your changes.
That’s it. You’ve successfully added a search form to your Elementor page.
Here’s how it looks on our test site:
Now let’s see how to add a smart search field to your Elementor page using a plugin.
How to Add a Smart Search Box With the SearchWP Plugin
If you want to add a smart custom search box to your Elementor page, the easiest way to do that is to use a plugin like SearchWP.
This is the most powerful and intuitive WordPress search plugin on the market.
Using it, you can make search on your site better and help your visitors to find what they’re looking for.
For example, with SearchWP, you can exclude specific pages from search results, make custom fields searchable, and more.
There are over 30,000 WordPress site owners who already use it to give their visitors the most relevant search results.
Beyond adding a smart search box to your pages, you can also use SearchWP to:
- Make shortcodes searchable. Do you use shortcodes to display content on your site? With SearchWP, you can make shortcodes searchable so that your visitors can find that content.
- Add live autocomplete search. Want to display live search results on your site? Using SearchWP, you can turn on this feature in a couple of clicks.
- Track searches of your visitors. SearchWP collects data about search activity on your site so that you can see what your visitors are searching for.
- Enable search by tags. Add tags to your posts? With SearchWP, you can make them searchable so that your visitors can find the right content faster.
Now that you know how SearchWP can improve your on-site search, let’s see how you can add a smart custom search box to your Elementor page using it.
Step 1: Install and Activate SearchWP
To begin, go and grab your copy of the SearchWP plugin here.
The next step is to log into your SearchWP account. Once there, go over to the Downloads tab in your dashboard.
Then, click on the Download SearchWP button to start downloading the plugin.
Once the download is complete, copy your SearchWP license key on the same page.
The next step is to upload the plugin’s ZIP file to your site and install SearchWP.
If you need a refresher on how to do that, you can follow this step-by-step guide on how to install a WordPress plugin.
After you install SearchWP, you’ll need to activate it with your license key.
To do that, point a cursor over the SearchWP button at the top panel of your WordPress dashboard and click Activate License.
Then, paste your license key that you copied at one of the previous steps into the License field and press the Activate button.
After you activate your SearchWP license, you can move on to adding a new search engine and customizing it to meet your needs.
Step 2: Add a New Search Engine and Customize It
To get started, click the Engines tab in the SearchWP settings.
On this tab, you can add new search engines and manage the existing ones.
A search engine contains a set of rules that WordPress follows when performing a search.
With SearchWP, you can create multiple search engines and link them to specific search boxes.
It allows you to create custom search boxes with individual sets of rules and settings.
Currently, there is a single search engine named Default. SearchWP automatically creates it after installation.
The Default search engine controls the work of every existing search box on your site. By customizing it, you can manage how search works across your site in general.
For example, you can make searchable a lot of useful data, exclude specific categories from search results, and more.
Since we want to make smarter every search box on our site, we’ll edit the Default search engine.
To begin, let’s manage the list of its search sources.
By adding and removing search sources from this list, you can control where WordPress looks for matches.
To customize your search sources, press the Sources & Settings button.
You can choose which search sources you want WordPress to consider when performing searches on the pop-up window.
For example, let’s say we want to limit search on our test site to only posts and media files.
To do that, we uncheck all the search sources except Posts and Media.
This is what it looks like on our test site:
When you’ve finished managing your search sources, press Done.
Now let’s help your visitors find the posts they want faster.
First, click on the Posts search source to open its settings.
Here you can see the list of post attributes that WordPress takes into account when searching.
Attributes are specific parts of the post, such as title, content, slug, and excerpt.
To let your visitors find the posts they’re looking for faster, we’ll add new attributes to this list.
First, press the Add/Remove Attributes button.
You can manage current attributes on the pop-up window and add new ones.
The easiest way to make your post search smarter is to make WordPress consider custom post fields.
To make searchable data in a specific custom field, click on the Custom Fields field and enter its name with the “_” prefix.
For example, we’ll make searchable the _tutorial custom field that we use on our test site:
Also, there is a way to make WordPress consider all existing custom fields without entering the name of each one manually.
To do that, click the Custom Fields field once again and select the Any Meta Key shortcut.
This shortcut allows you to make all custom fields on your site searchable at once.
Also, you can select the taxonomies that you want WordPress to consider when performing searches.
To do that, click on the Taxonomies field.
Taxonomy in WordPress is a method of organizing content. When it comes to posts, it might be a category, tag, format, or something else.
For example, let’s say we want WordPress to take post categories into account when searching.
To do that, we’ll click on the Categories taxonomy to add it to the list of post attributes.
When you’re finished managing searchable post attributes, click Done to save the changes you’ve made.
In addition, you can manage the relevance weight of applicable attributes by moving the slider next to them to the left or right.
The lower the weight of the attribute, the less attention WordPress will pay to it when performing searches.
For example, let’s say we want to reduce the weight of the Slug and Excerpt attributes to zero.
To do that, we’ll move the slider next to each of them all the way to the left:
Let’s also make PDF files and documents searchable on your site.
To do that, click on the Media search source.
Then, press the Add/Remove Attributes button.
To make WordPress index document content and PDF metadata that you upload to your site, check the Document Content and PDF Metadata boxes.
After you’ve finished, press Done.
When you’re satisfied with the way you’ve customized your search engine, you’ll need to save the changes you’ve made.
You can do that by pressing the Save Engines button in the upper right corner.
That’s it. Now you know how to customize search on your site to meet your needs and make it much smarter.
The final step is to add your new smart search box to the Elementor page.
Step 3: Add a Smart Search Box to the Elementor Page
All the changes you’ve made to the Default search engine automatically apply to every search box on your site.
Since earlier we’ve already shown how to add a search box to the Elementor page, you can just follow this tutorial.
SearchWP has seamless integration with Elementor, so you don’t have to take any additional steps to configure it.
After you’ve added a search box, let’s try out your new search engine.
For example, on our test site, we have a post called “TOP-3 WordPress eCommerce plugins”. It has the Type custom field, where we put the word “showcase”.
Let’s check if we can find this post only by its custom field content.
As you can see, we successfully found the post since our site now considers custom fields when performing searches.
It allows visitors to find the right content faster and makes their user experience more positive.
Also, we uploaded a PDF file titled “WordPress User’s Guide” to our test site. Let’s check if we can find it.
As you can see, we found our PDF.
It means that our visitors can now find PDFs and documents uploaded to our site by using a search bar.
In this article, you learned how to add a search box to your Elementor page. It’ll help you to encourage your visitors to make searches on your site and boost your content discoverability.
If you’re ready to add a smart search box to your Elementor pages, you can grab your copy of SearchWP here.
Wonder why custom post type search doesn’t work on your site? Check out the how to fix custom post type search not working in WordPress tutorial.
Want to make post tags searchable on your site? Follow the how to search posts by tags in WordPress detailed guide.
