How to Use AJAX in WordPress Child Theme

In this tutorial, I am going to show you how we can implement AJAX in WordPress Child Theme or any WordPress themes with the help of a simple example.

First, Make sure you activated Child Theme in your WordPress site.

Now follow the below step to implement ajax in your theme.

Step 1:

We are taking a simple example of the form in Template File to submit through ajax.

Please look at I just add simple form with single text input and block for display output result.

Step 2:

We are in the same PHP file to add more code to send ajax request using Javascript/jQuery. Please take a look I am updating template file code.

Step 3:

Now we will update functions.php file of your child theme.

In this file we will use wordpress action like below:

add_action('wp_ajax_my_custom_action','custom_fn_callback');

above action hook has 2 arguments. wp_ajax_[here will be the value that is sent with data parameter “action” in code of ajax] so it will be wp_ajax_my_custom_action while second argument is the callback function which will process the data and send the results back.

If you want to show ajax result for non-logged in users also for that you can add action like this

add_action('wp_ajax_nopriv_my_custom_action', 'custom_fn_callback');

Here it is final sample code of functions.php file after adding both action hook.

Step 4:

If you want to test my code then please follow this step:

  1. Login to your WordPress dashboard
  2. Add a new page and choose “Ajax Example Page Template
  3. Visit the page and see the Magic!

This above code of AJAX in WordPress Child Theme is a core code for beginners…If you want to do more complex code using my method then also you will get your desired result.

Leave a Comment

sing in to post your comment or sign-up if you dont have any account.

11 − six =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Limited time offer: Manage your WordPress website just for $16