Custom ajax in wordpress

Asynchronous JavaScript and XML. AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. With AJAX we can submit form without page reload. This means that it is possible to update parts of a web page, without reloading the whole page.

Step 1

Create a custom template page in your themes directory located at website_root_path/wp-content/themes/your_theme. You can read our article how to create a custom post template in wordpress. Here below we have created a template page Contact Form and created a form in this template. So, simply create a file contact-template.php file in your themes directory and paste the code given below in the file.

/*
 * Template Name: Contact Form Template
 * Template Post Type: page
 */

get_header(); 

?>

<form type="post" action="">

    <label for="name">Name:</label>
    <input name="name" type="text" />

    <label for="email">Email:</label>
    <input name="email" type="text" />

    <input type="hidden" name="action" value="save_ajax_data"/>
    <input type="submit">
</form>
<!-- new registeration -->

<?php

get_footer();

Now we have a contact form template page. Go to your WordPress Dashboard and create a page and select your template Contact Form Template from the right sidebar Page Attributes. After creating a page open your page url and you will the see the form we have created in our Contact Form Template page.

Step 2

Create a directory js in your themes directory and under your js directory create a file my-ajax-script.js. Then paste the code given below in your my-ajax-script.js file.

jQuery(document).ready(function(){

        jQuery('form').submit(function(e){

            e.preventDefault();

            var formData = jQuery(this).serialize();

            jQuery.ajax({
                type: "post",
                dataType: "json",
                url: my_ajax_object.ajax_url,
                data: formData,
                success: function(msg){
                    console.log(msg);
                }
            });

            return false;

        });

    });

Step 3

Now paste the code given below in your functions.php under your themes directory.

/*******************custom ajax*****************/

function my_enqueue() {

    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );

    wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

}

add_action( 'wp_enqueue_scripts', 'my_enqueue' );


function saveAjaxData() {

    print_r($_REQUEST);
    wp_die();

}

add_action( 'wp_ajax_nopriv_save_ajax_data', 'saveAjaxData' );
add_action( 'wp_ajax_save_ajax_data', 'saveAjaxData' );

Now we can handle form data in saveAjaxData function. You can also learn about how to submit a form in wordpress. And you can run your custom queries.

Code Explanation:

In step 1 we have created a custom template to show our form. Then we created a page in Dashboard and included that template. You can read here about templates.
In Step 2 we have created my-ajax-script.js file and added our ajax code in this. We used my_ajax_object in ajax url which we have created in functions.php file. You can read here about ajax in wordpress.
In Step 3 we used the functions wp_enqueue_script, wp_localize_script, wp_enqueue_scripts in functions.php file to add our my-ajax-script.js file. We used the function get_template_directory_uri to get the theme directory path and we used my_ajax_object which we also used in ajax method in js file. To handle form submit we used wp_ajax_nopriv_ and wp_ajax_ and In this save_ajax_data is a hidden field action’s value.
Using this article you can make ajax forms in wordpress, custom ajax plugins in wordpress, run ajax in wordpress without plugin or any custom ajax based module in wordpress.

And If you want to use ajax in your wordpress plugin or want to develop plugin with ajax in wordpress then read our article how to create custom plugin in wordpress and use this ajax in your plugins.

Please like share subscribe and give positive feedback to motivate me to write more for you.

For more tutorials visit my website.

Thanks:)
Happy Coding:)