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
- AJAX is Fast – AJAX Response is Faster than typical Page Loading Approach.
- 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
Next Article →
