How to make AJAX calls in WordPress

Daminda Dinesh Imaduwa Gamage
6 min readNov 11, 2022
How to make AJAX calls in WordPress
Photo by Justin Morgan on Unsplash

What is AJAX?

Ajax has been in web development as a way of communicating between the front end and the back end of web applications for quite some time. With Ajax, the frontend pages do not need to reload after it makes requests to the backend. Chances are quite high, even as a new developer, you must have included Ajax calls in your web applications.

If you are a WordPress developer or new to Wordpress custom website development, you might be looking for ways to do Ajax requests. You probably implemented it the way you used to do it in other web applications that do not utilize the power of wordpress. And pretty sure, you must have got an error. Then, you got frustrated and got frustrated; you google ‘how tos’ one after another. And, now you hit this post.

Welcome, I am here to help you. let me show you how to do it in WordPress style!

AJAX in WordPress

Making Ajax requests in WordPress is different from how you do it in other web applications. Remember WordPress is a Web Application. It already utilizes Ajax as a technology. All the Ajax requests in WordPress are first directed to one file called admin-ajax.php.

Now lets us see how to implement it. We are going to create a page based on a custom wordpress template and make Ajax calls from that page.

These are the steps that we are going to do

  1. Create a custom page template
  2. Add a custom script file
  3. Add code required to run the external scripts and AJAX call in the functions.php file.

please note that you need to be familiar with WordPress and WordPress child themes in order to benefit from this post.

Creating the page based on a custom page template

This part is not strictly related to making Ajax requests. However, I choose a custom template because there is a good chance that you would make an Ajax request in a custom code that you adding as a WordPress developer.

STEP 1

In your child-theme folder, add a file named contact-form.php, and add the following code.

--

--