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.
However, the default search functionality is pretty basic in WordPress and lacks advanced features.
As a result, it would often miss relevant pages and return results that didn’t make sense. Visitors would search for topics, but they’d get zero results or completely unrelated posts.
In this article, we’ll show you how to add a search box to Elementor pages using 2 very simple methods.
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.
From here, you can select the page where you’d like to add the search box.
Next, you will need to click the ‘Edit with Element’ button when you’re in the WordPress content editor.
Once you are in the Elementor page editor, you will see multiple blocks in the panel on the left.
The best part is that you can simply drag and drop these elements onto your page.
Simply type “search form” in the Search Widget field on the left panel.
After that, you’ll see the Search Form widget.
From here, you can 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, go ahead and click the Publish button. This will save all your changes.
That’s it. You’ve successfully added a search form to your Elementor page.
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, then 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 50,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 by visiting the website.
Once you’ve created a new account, the next step is to log into your SearchWP account. From here, go over to the Downloads tab in your dashboard.
Next, you can click the Download SearchWP button to start downloading the plugin and save the plugin files on your computer.
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, then you can follow this step-by-step guide on how to install a WordPress plugin.
After you activate SearchWP, you’ll see the onboarding wizard. Simply click the ‘Start Onboarding Wizard’ button and follow the instructions to complete the setup.
Now, 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
A search engine contains a set of rules that SearchWP follows when performing a search.
The best part is that you can create multiple search engines and link them to specific search forms.
SearchWP also allows you to create custom search boxes with individual sets of rules and settings.
Currently, you will see a single search engine named Default, which controls the native WordPress search forms. 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, head to SearchWP » Algorithm from your WordPress dashboard and press the Sources & Settings button.
You can choose which search sources you want WordPress to consider when performing searches on the pop-up window.
By adding and removing search sources from this list, you can control where WordPress looks for matches.
For example, let’s say we want to limit search on our test site to only posts. To do that, we uncheck all the search sources except Posts.
When you’ve finished managing your search sources, press Done.
Next, you can edit the attributes for each source that you want to consider while searching. Attributes are specific parts of the post, such as title, content, slug, and excerpt.
For example, let’s help your visitors find the posts they want faster.
To do that, simply head to the ‘Posts’ source section and click the Add/Remove Attributes button.
Next, you can manage current attributes on the pop-up window and add new ones.
For instance, you’ll see the default attributes like title, content, slug, excerpt, and author. Besides that, SearchWP also lets you add custom fields and taxonomies.
To let your visitors find the posts they’re looking for faster, we’ll add new attributes to this list.
The easiest way to make your post search smarter is to make SearchWP consider custom post fields.
To make data searchable in a specific custom field, simply click on the Custom Fields field and select which fields to consider.
For example, we’ll make searchable the _tutorial custom field that we use on our test site:
Other than that, you can select the taxonomies such as categories and tags that you want SearchWP to consider when performing searches.
Taxonomy in WordPress is a method of organizing content. When it comes to posts, it might be a category, tag, format, or something else.
To do that, simply click on the Taxonomies field dropdown menu.
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 further right the slider, the more importance or relevance that particular Attribute will be given in the search algorithm.
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 button in the upper right corner.
Now, the final step is to add your new smart search box to the Elementor page.
Step 3: Add a Smart Search Box to an Elementor Page
All the changes you’ve made to the Default search engine automatically apply to every search form on your site.
Pro Tip: SearchWP also lets you create custom search forms and link them to different engines. It offers pre-built templates and lots of customization options. To learn more, please see our guide on how to create a custom search form in WordPress.
Now, let’s add the search box to a page using Elementor.
To get started, navigate to Pages » All Pages in your WordPress dashboard.
From here, you can select the page where you’d like to add the search box.
Next, you will need to click the ‘Edit with Element’ button when you’re in the WordPress content editor.
After that, you will see the landing page editor in Elementor.
From here, you can add the SearchWP Form block from the panel on the left. Simply head to ‘SearchWP’ section and drag and drop the element anywhere on your page.
After adding the SearchWP Form block, you also select which search form to show on the page.
To do that, simply click the dropdown menu under the Form Settings and choose your form.
After adding the search form, you can go ahead and Publish your Elementor page.
Next, you can visit your Elementor page and try out your new search engine.
For example, on our test site, we have a post called How to Fix WooCommerce Search by SKU Not Working (Step by Step).
Let’s check if we can find this post using the search form.
As you can see, we successfully found the post since our site when performing searches.
It allows visitors to find the right content faster and makes their user experience more positive.
We hope this article helped you learned how to add a search box to your Elementor page. You may also want to see our guides on how to fix custom post type search not working in WordPress and how to search posts by tags in WordPress.
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.
