SearchWP

News

How to Add Live Ajax Search to Your WordPress Without a Plugin

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:

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.

live search on a site

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 logo

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.

go to the Downloads tab

Then, press the Download SearchWP button and save the plugin’s ZIP file to your computer.

click Download SearchWP

After downloading, copy your SearchWP license key on the same page. You’ll need it further to activate the plugin on your site.

copy your license key

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.

click Activate License

After you get to the License page, paste your SearchWP license key into the License field and click Activate.

press 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.

go SearchWP Extensions

Then, find the Live Search extension and click Install under its section.

click Install Live search

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:

how to add live search to your WordPress site without a plugin

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.

go to the Theme Files Editor

Then find the functions.php file and click on it to open it in the file editor.

open the Theme Functions file

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="&lt;script&gt;" title="&lt;script&gt;" />

<?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.

press Update File

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.

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

  • “This plugin is awesome! I can easily manipulate the search results without coding. It’s easy to use and easy to configure. I wish all plugins were like this. This plugin just works.”

  • “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.”

  • “We were having trouble finding documents on our site when using the search feature. So I looked at a lot of search plugins but nothing topped SearchWP. We are now able to find everything on our site through the search feature. Amazing WP plugin!”

[wpforms id="3080"]
[wpforms id="3080"]
[wpforms id="3080"]
[wpforms id="3080"]
[wpforms id="3080"]
[wpforms id="3080"]
[wpforms id="3080"]
[wpforms id="3080"]
[wpforms id="3080"]
[wpforms id="3080"]