NitinOffers.COM

Add a stylish AJAX live search box to show the instant results in WordPress?

Affiliate Disclosure – NitinOffers.COM content is free. When you purchase through referral links on this site, we earn a commission. Learn more.

It is quite easy to do that. No matter that we are using WordPress Astra (WPAstra) theme or any other theme, we can add a search box that will show you the content in live search as in Wikipedia/YouTube/Google. Why here I am talking about the WP Astra theme because an article you are reading now using a theme named Astra by Brainstorm.

Below GIF showing the live search.

[toc]

How to add an Ajax search box with the live results in the WordPress blog or page/post?

On this page, we will get to add an Ajax search box using a free plugin. The free plugin, you need to install to your WordPress and your website will able to show live search results from the search box.

A very easy method to add an Ajax search box with the live results in the WordPress blog or page/post using a plugin.

You have to install a plugin named “Ajax Search Lite“. With this plugin you can show live text/image in results.

  • Go to your WordPress blog and log in.
  • Go to Plugins and click on Add New
  • Search as Ajax Search Lite and install and then activate it.

Now, what is the best setting in the Ajax search lite to show the instant results in WordPress?

After the installation and activation of the Ajax Search Lite plugin to your WordPress blog you will see the Ajax Search Lite showing in the menu (as in below image).

Add a stylish AJAX live search box to show the instant results in WordPress?

Step 1. As in the above image, click on Ajax Search Lite and you will be on the General Options and Sources and Basic in General Options.

  • Make it off – Try to replace the theme search with Ajax Search Lite form?
  • Let it be open for “Search in the title?”, Search in content?, Search in post excerpts?
  • Make it off – Search in terms? (categories, tags)

Step 2. Image options – if you want to show image in live search results to choose yes. You will have some options like image source settings, image width/height, default image source (incase not using any image in any article/post.)

Step 3. I will recommend you to keep it off for “Show search settings on the frontend?”

Step 4. Layout options – In Layout options, check first for Search Box layout (as in the below image). You can set search plugin theme, you can change placeholder text, you can change the font family as well based on your current font on your WordPress blog or website.

Step 5. With the reference of given below image you can maintain the result behavior.

Step 6. Advanced – In advanced options, set title field as post title also you can exclude any category, post/page id knowingly.

This is the best setting as per my point of view. And you also have all rights to change it so go ahead and make any change you need on your blog or website.

In WordPress blog, how much places we can install and activate the search box?

You can install it to the sidebar, footer, or anywhere you want to install. You have to copy the shortcode which will be already there and the place where you want to show the search box.

In the sidebar/footer you can install it directly in Appearance–>Widgets area, no shortcode required. You can use code in an ad manager plugin like Advanced Ads, Ad Inserter, etc so that you can show the search box on a particular page or post.

Recommendation

I would highly recommend you go with the “Ajax Search Lite” plugin. Because your all basic needs will cover with the free version. However, you can upgrade for more features that I may recommend you but I never upgraded.

Read these too


Leave a Reply

Your email address will not be published.

NitinOffers.COM