SearchWP

News

How to Add a Search Box to Elementor Page (Beginner's Guide)

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:

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.

navigate to All Pages

Then, hover your cursor over the page to which you want to add the search box and click Edit with Elementor.

click Edit with Elementor

Once you get to the Elementor page editor, type “search form” in the Search Widget field on the left panel.

search for search form

After that, you’ll see the Search Form widget.

find the search form

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:

how to add a search box to Elementor page (beginner's guide)

After you add a search form, click Update at the bottom of the editor to save your changes.

click Update

That’s it. You’ve successfully added a search form to your Elementor page.

Here’s how it looks on our test site:

click search

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.

SearchWP logo

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.

navigate to the Downloads section

Then, click on the Download SearchWP button to start downloading the plugin.

press Download SearchWP

Once the download is complete, copy your SearchWP license key on the same page.

copy your license key

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.

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.

click Activate

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.

go to the Engines tab

On this tab, you can add new search engines and manage the existing ones.

the list of your search engines

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.

click Sources and Settings

You can choose which search sources you want WordPress to consider when performing searches on the pop-up window.

search sources

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:

check search sources you want

When you’ve finished managing your search sources, press Done.

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.

click Posts

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.

applicable post attributes

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.

click Add Remove attributes

You can manage current attributes on the pop-up window and add new ones.

manage post attributes

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:

add a custom field

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.

choose Any Meta Key

Also, you can select the taxonomies that you want WordPress to consider when performing searches.

To do that, click on the Taxonomies field.

add a taxonomy

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.

add the Categories taxonomy

When you’re finished managing searchable post attributes, click Done to save the changes you’ve made.

click Done

In addition, you can manage the relevance weight of applicable attributes by moving the slider next to them to the left or right.

adjust the attributes relevance weight

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:

set the lowest weight

Let’s also make PDF files and documents searchable on your site.

To do that, click on the Media search source.

click on the Media search source

Then, press the Add/Remove Attributes button.

click Add Remove attributes within the Media source

To make WordPress index document content and PDF metadata that you upload to your site, check the Document Content and PDF Metadata boxes.

check Document content and PDF meta

After you’ve finished, press Done.

press Done when you're finished

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.

click Save Engines

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.

search by a custom field

As you can see, we successfully found the post since our site now considers custom fields when performing searches.

we found our post

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.

search for a PDF file

As you can see, we found our PDF.

we found our PDF file

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.

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

  • “I purchased SearchWP for its ability to search inside more than 100 PDF documents on my website. My site visitors are able to see search results with pages, posts and PDFs weighted in my preferred order. Customer support has been very helpful.”

  • “SearchWP searches custom attributes. This is what I needed primarily for my client.”

  • “I approached the support team with an idea for a customised implementation of the SearchWP weighting system. I was really just looking for a point in the right direction, but Jon went above and beyond all expectations to help me.”

[wpforms id="3080"]