Looking for a way to add a live Ajax search to your WordPress site without a plugin?
It’ll allow you to instantly deliver search results to your visitors and improve their user experience.
In this guide, we’ll talk about how you can add live search to your site without a plugin and the disadvantages of this method.
Here’s a table of contents to help you navigate:
Why Add Live Search to Your Site
Adding live search to your site is helpful for several reasons.
First, it’s much more convenient for your visitors to get instant search results rather than seeing them on a new separate page where WordPress shows them by default.
It allows them to save time and faster figure out if the content they’re looking for is on your site or not.
Secondly, it helps you increase your pageviews, since visitors who’ve had a positive search experience on your site are more likely to use it again.
It’s also a great way to attract more traffic from search engines, since Google pays a lot of attention to the average session duration on a site.
But adding a live search without a plugin might be a challenging goal. Let’s take a closer look at why this is not the best option.
Drawbacks of Adding Live Ajax Search Without A Plugin
The main problem in adding live search to your site without a plugin is that it involves editing your theme code.
This approach has a couple of serious disadvantages you should be aware of:
- It requires coding skills. You must have coding experience and a deep understanding of how WordPress works to edit your theme code successfully.
- It takes more time. In contrast to using a plugin, editing your theme code takes quite a time to figure out what changes you need to make and where to put them.
- It’s not reliable. You can easily lose all your code customizations if you update your theme or WordPress version.
- It’s not convenient. A plugin gives you much more flexibility since you can quickly enable and disable the features you need according to your needs.
So, if you’re not an experienced WordPress user or web developer, you’re better off using another way to add live search to your site.
Once we sorted that out, let’s see how you can add live search to your site without editing your theme files using a plugin.
Method 1: Add Live Ajax Search Using a Plugin
The easiest way to add a live Ajax search to your site is to use a plugin like SearchWP.
SearchWP is the best WordPress search plugin on the market, with over 50,000 active installs.
With it, you can enable live search on your site in just a few clicks, no coding needed.
And that’s just one of many other SearchWP features. The main purpose of this plugin is to give you complete control over search on your site.
For instance, using it, you can change the order of search results, make post tags, categories, and custom fields searchable, create custom search forms, and more.
Here are some other SearchWP features that’ll help grow your business:
- Enable fuzzy search: This way, your visitors can find the right search results, even if they make a typo in a search query.
- Track searches on your visitors: Gather comprehensive data on search activity on your site, including the most popular searches, the number of clicks, and more.
- Exclude specific pages from search results: Hide unnecessary pages from search results on your site to help visitors find the content they’re looking for faster.
- Include PDF files to search results: Let your visitors find PDFs and office documents using the search bar on your site.
With that, let’s see how you can enable live search on your site using SearchWP.
Step 1: Install and Activate SearchWP on Your Site
To get started, you’ll need to visit the SearchWP website and get your copy of SearchWP.
Once done, go to your SearchWP dashboard and click the Downloads tab.
Then, press the Download SearchWP button and save the plugin’s ZIP file to your computer. After downloading, you should also copy your SearchWP license key on the same page. You’ll need it further to activate the plugin on your site.
Now, you’ll need to upload the SearchWP ZIP file to your site and install the plugin. Check out the how to install a WordPress plugin tutorial if you require a reminder on how to do that.
Once the plugin is active, you’ll see the SearchWP welcome screen and setup wizard. Go ahead and click the ‘Start Onboarding Wizard’ button and follow the onscreen instructions.
Once you activate your license, you’re ready to move to the next step and install the Live Search extension.
Step 2: Install the SearchWP Live Search Extension
Installing this SearchWP extension allows you to enable Live Ajax search on your site in a few clicks without writing a single line of code.
To get started, you can navigate to SearchWP » Extensions from your WordPress dashboard.
From here, you’ll need to find the Live Search extension and click the Install button.
That’s it. You’ve just successfully added a live Ajax search to your site.
Let’s see how it works.
Step 3: Test Your New Search
To do that, go to your site and perform a search.
For example, here’s what a live SearchWP Ajax search looks like on our test site:
You can also see our guide on how to add live search to WordPress for free.
Method 2: Add Live Ajax Search Without a Plugin
To add a live Ajax search to your site without using a plugin, you should note that you’ll need to add a lot of custom code and make changes to your theme files.
Now, if you’re not a developer, then we don’t recommend this method. Instead, you can follow the first method and use SearchWP to add live Ajax search.
Before you start, we recommend creating a child theme of your current theme that you use on your site. It’ll allow you to quickly switch to your parent theme if you do something wrong and crash your site.
You can check out this tutorial on how to create a WordPress child theme if you need help with that.
It’s also good practice to back up your site before you start editing, just in case. There are lots of WordPress backup plugins you can select, like Duplicator.
Next, you will need to add JavaScript, PHP, and CSS for setting up Ajax search.
To help you out, here is a list of functionalities you’ll need on your WordPress site:
- Integrate the live results to the search forms on your site.
- Make Ajax requests to fetch the results.
- Display the results in a dropdown menu, so visitors can view them as they type.
- Handle user interaction with the search results. For example, you will need to move across the results with the keyboard arrows, close the dropdown if the user clicks outside of it or presses the ESC key.
- Add PHP code to handle the Ajax request, run the query and return the results, and send an Ajax response.
- CSS to style the dropdown and the search results that will appear.
Since this requires custom development, you may want to hire a developer or a professional service like WPBeginner Pro Services.
This way, you can explain your requirements and get a custom solution made for your WordPress site.
It’ll allow your visitors to instantly get search results and increase the number of your pageviews.
We hope this article helped you learn how to add live Ajax search to your WordPress without a plugin. You may also want to see our guides on how to search posts by tags in WordPress and how to exclude category from WordPress search.
Want to add live search to your site in a few clicks without coding? You can get started with SearchWP here.
