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
- Drawbacks of Adding Live Ajax Search Without A Plugin
- Easiest Method to Add Live Ajax Search to Your Site
- How to Add Live Ajax Search to Your WordPress Without a Plugin
Let’s begin!
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.
Easiest Method to Add Live Ajax Search to Your Site
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 30,000 active installs.
With it, you can enable and disable 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 much 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 get your copy of SearchWP.
Once done, go to your SearchWP dashboard and click Downloads.
Then, press the Download SearchWP button and save the plugin’s ZIP file to your computer.
After downloading, 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 need a reminder on how to do that,
After the SearchWP installation, you’ll need to activate your plugin’s copy with your license key.
To do that, point your cursor over the SearchWP button at the top panel of your WordPress dashboard and click Activate License.
After you get to the License page, paste your SearchWP license key into the License field and click Activate.
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, navigate to SearchWP » Extensions on the left side of your WordPress dashboard.
Then, find the Live Search extension and click Install under its section.
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:
Now, let’s see how you can add a live search to your site without a plugin.
How to Add Live Ajax Search to Your WordPress Without a Plugin
To add a live Ajax search to your site without using a plugin, you’ll need to make changes to your theme files.
To get started, create 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.
It’s also good practice to back up your site before you start editing, just in case.
You can check out this tutorial on how to create a WordPress child theme if you need help with that.
After you’ve created a child theme, go to your WordPress dashboard and navigate to Appearance » Theme File Editor.
Then find the functions.php file and click on it to open it in the file editor.
Next, paste the following code to your functions.php file:
<?php
/*
==================
Ajax Search
======================
*/
// add the ajax fetch js
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0Afunction%20fetch()%7B%0A%0A%20%20%20%20jQuery.ajax(%7B%0A%20%20%20%20%20%20%20%20url%3A%20'%3C%3Fphp%20echo%20admin_url('admin-ajax.php')%3B%20%3F%3E'%2C%0A%20%20%20%20%20%20%20%20type%3A%20'post'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%20action%3A%20'data_fetch'%2C%20keyword%3A%20jQuery('%23keyword').val()%20%7D%2C%0A%20%20%20%20%20%20%20%20success%3A%20function(data)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20jQuery('%23datafetch').html(%20data%20)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<?php
}
// the ajax function
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){
$the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('page','post') ) );
if( $the_query->have_posts() ) :
echo '<ul>';
while( $the_query->have_posts() ): $the_query->the_post(); ?>
<li><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></li>
<?php endwhile;
echo '</ul>';
wp_reset_postdata();
endif;
die();
}
Once you’re done, press Update File to save your changes.
That’s it. You’ve successfully added live Ajax search to your WordPress site without a plugin.
It’ll allow your visitors to instantly get search results and increase the number of your pageviews.
Want to add live search to your site in a few clicks without coding? You can get started with SearchWP here.
Wondering how to enable search by post tags? Check out our detailed tutorial on how to search posts by tags in WordPress.
Want to hide some post categories from search? Follow the how to exclude category from WordPress search guide.
