Easiest Way to Add Live Search

Searching for the best AJAX search WordPress plugin? 🔌

Adding AJAX-powered live search to WordPress is a great way to improve your site’s user experience (UX) and boost content discoverability.

In this post, you’ll learn step-by-step how to set up AJAX search in WordPress using a completely code-free solution.

In fact, you can be up and running in just a few minutes, while still having access to functionality to refine how your site’s AJAX search functions.

👉 All you need to do is:

1. Install the Otter Blocks plugin.
2. Add the Search block where you want your AJAX WordPress search box to appear and enable the Live Search toggle.
3. Customize the AJAX live search functionality as needed, such as configuring it to only search blog posts but not pages.

👇 If you want to jump straight to the tutorial, you can click this jump link.

What is AJAX search for WordPress?

You’ll likely use live search functionality on a day-to-day basis. For instance, all major search engines and video sites such as YouTube provide this type of feature.

You start typing in the search box and you instantly see a list of suggested queries (or suggested results) – no page load needed.

While WordPress has its own search bar, it doesn’t use AJAX by default. Instead, users enter a search term in the box, hit enter, and a new page with results loads.

To add live search to your site, you’ll need the help of a plugin, which is what this post is all about.

The benefits of live AJAX search in WordPress

Anything you can introduce that enhances UX will offer value to your site. However, live AJAX search for WordPress can give your users something special:

• You can provide a way for users to “self-serve” their needs. They’ll have a fast way to search your entire site and find the right page.
• Interactive elements can provide a greater connection between your site and users. This is because you can provide relevant search results faster, and without the need for extra button clicks.
• You can also keep page loading times down to a minimum, as live AJAX search doesn’t need to make further HTTP requests or load other pages.

Why a manual coding solution for live search might not be best

Given that AJAX uses JavaScript, you might consider “rolling your own” solution using the programming language.

This is a fine idea in theory, but won’t be the best method to add live AJAX search to WordPress. Here’s why:

• First, you can only create a solution that’s as good as your skills. If you don’t have expert-level JavaScript knowledge, this will show in the results.
• In addition, you’ll also need to know about WordPress’ file structure, template structure, and much more. There’s a lot of cogs that make up WordPress’ wheel.
• Even if you do have the necessary skills to code a live search solution, you’ll also need time and money to develop and implement it. This can be hard to come by, especially if development is not your primary employment.
• If you need to troubleshoot your manual solution, this can eat further into your time, money, and resources. You could be biting off more than you can chew.

Instead, there’s a better way to implement the right functionality within WordPress: plugins. Let’s take a look at how this works next.

Use an AJAX search WordPress plugin instead

For most people, using an AJAX search WordPress plugin is a much better option.

While there are plenty of AJAX search WordPress plugins to choose from, not all are created equal. For example, some plugins are limited when it comes to styling options or controlling what content to search in.

For that reason, we’re going to use the Otter Blocks plugin for this tutorial.

As the name suggests, Otter Blocks is a collection of elements for the native WordPress Block Editor.

In terms of AJAX search functionality, the most relevant feature is the Search block.

It lets you choose which post types to search in and fully customize the design of your search box. You can add it to any part of your site, including posts, pages, sidebars, and more.

Beyond the AJAX search WordPress functionality, Otter Blocks gives you a few extra ways to spice up your layouts and design:

• You can add headings with a greater level of customization than you’ll get by default.
• There’s the option to build a responsive section that includes advanced customization and space for six columns.
• You’ll be able to add stunning animations such as Lottie effects and flip cards.
• If you sell products through your site, Otter Blocks includes pricing tables, the ability to implement “add to cart” buttons, business hours, and much more.

In fact, Otter Blocks provides additional functionality for all Blocks on offer – even native ones. For example, you can set visibility conditions, custom CSS, and more from the typical Block Editor interface.

How to use Otter Blocks to add live AJAX search to WordPress

You’ll only need a few steps to set up Otter Blocks to add live AJAX search to WordPress. Let’s begin with the installation process:

1. Install and activate Otter Blocks
2. Enable live AJAX search for WordPress within Otter Blocks’ settings
3. Tweak the settings to refine the search experience on the front end of your site

1. Install and activate Otter Blocks

First off, you’ll need to install Otter Blocks and activate it for your website. There are plenty of ways to do this, but we’d repeat what is already in our other article on the ThemeIsle blog.

This will show you how to install both the free and premium versions of Otter Blocks. However, for this post, you’ll need the premium version as this gives you live search functionality.

2. Enable live AJAX search for WordPress within Otter Blocks’ settings

Once you’ve installed the plugin, use the block inserter to add the Search block from Otter Blocks.

After you do this, it will add a form field and a button to your page layout.

This implements the core search functionality, but this isn’t live AJAX search in WordPress.

In its default setup, it will act as the typical WordPress search does.

To enable the AJAX search WordPress feature, turn on the Enable Live Search toggle in the right-hand sidebar:

3. Tweak the settings to refine the search experience on the front end of your site

Once you have live search functionality on your site, you can refine it in a number of ways.

Of course, there are a number of cosmetic and UX options.

For instance, you can change the button position, whether you use a label for the search box, and tweak the colors, animations, and borders for the search section:

From there, you can also give the search its boundaries of where to look on your site by choosing which post types to search in.

For this, you’ll use the Search In box on the right-hand sidebar:

This enables you to add “entities” for where you want the search to operate.

For example, you could choose to only search within your post’s content, or among your store’s products.

If you leave this field empty, Otter Blocks will search your entire site’s content.

Set up AJAX search WordPress functionality today 🎯

However, WordPress doesn’t offer this by default. Instead, you can use Otter Blocks to add this onto your site. There’s no code involved, and you get much more functionality than just live AJAX search.

📌 While Otter Blocks is a free plugin, the premium version provides the ability to set up live AJAX search in WordPress, among other options.

Do you still have any questions about how to set up AJAX live search on WordPress? Ask us in the comments below!

Yay! 🎉 You made it to the end of the article!