AJAX in WordPress – A Step by Step Guide [2021]

What is Ajax

Ajax stands for Asynchronous JavaScript And XML . In simple words, you can interact with database & show fetched content on the page without reloading or refreshing the page.

What are the Benefits of using AJAX

1. AJAX is Fast – AJAX Response is Faster than typical Page Loading Approach.
2. Better User Experience – User Don’t have to wait for the page to load as only the requested section refreshes.

Let’s Get Started with a Basic Example

To implement ajax in wordpress, we need 2 things –
1. A page to trigger AJAX and Display the Output.
2. A php function to handle the backend process.

Create a Page Template

Go into the Active theme directory of Your wordpress website and create a file wordpress-ajax.php and insert the following code into it

Now add the following code in the end of functions.php file –

How it Works –

The working can be divided into following steps –

The Page Template – A New page template to show trigger button and empty container for output.

The Jquery post method sends a post request on ajaxurl bound to the action my_ajax_action.

The function bound with the action runs the loop and sends the output in response.

The JS function Recieves the output & Displays it in console and the div with id postcontainer.

Similarly, we can create the Following –
1. Load More Posts in WordPress using AJAX
2. Filters Posts in WordPress using AJAX
3. Change Tab content in WordPress using AJAX
4. AJAX Pagination in WordPress

Reference Links

https://rudrastyh.com/wordpress/load-more-posts-ajax.html

https://github.com/owthub/owt-complete-solution/tree/master/owt-ajax