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 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 simple example of 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 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 new page and choose “Ajax Example Page Template
  3. Visit page and see the Magic!

This above code of AJAX in WordPress Child Theme is 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.

ten − four =

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