How to make search with AJAX (without page refresh)

Hestia theme has a search out of the box, however, for search results to appear you need to click ENTER or Search and they will appear after a page refresh. This plugin modifies the default search to make it load using the AJAX - method when results are returned without a refresh of the page.

Here are the steps to integrate the plugin to Hestia theme:

1. Download and install the created plugin
2. Create a Child theme (if you don't have one yet) to be able to modify functions.php file
3. Modify CSS if needed (you can use Additional CSS section in Customizer to overwrite styles if needed)

1. Download and install the created plugin

This is the link where you can download the plugin that modifies the search and force it to use the AJAX method: DOWNLOAD
Install the plugin to your Wordpress, here is a guide which covers the installation process: GUIDE

2. Create a Child theme (if you don't have one yet) to be able to modify functions.php file

You need to add one function to the functions.php file so a Child theme is needed (if you modify the existing functions.php file of the parent theme - changes will be overwritten with the next update of the theme). Here is a guide that covers how to create a Child theme for Hestia: GUIDE

After you created the child theme place this function to the functions.php file:

wp_localize_script( 'ajax-search', 'ajaxurl', admin_url( 'admin-ajax.php' ) );

3. Modify CSS if needed (you can use Additional CSS section in Customizer to overwrite styles if needed)

There are default CSS styles applied, however, you might want to change text colors, background color, paddings, and similar styles. To do that you could either manually edit the .css file in the files of the installed plugin ajax-search.css or use Additional CSS section in the Customizer to target specific HTML elements and change their style. It can be accessed in Appearance -> Customize -> Additional CSS section.

After completing all these steps your search should work using AJAX on the website and results should be displayed without a page refresh.