WordPress Plugin Development Tutorial Using Ajax

WordPress ajax is very easy to implement and in this tutorial we will learn how to make an ajax form and will develop a plugin regarding that,

Now step by step start

** if you need then visit my plugin development tutorial page to define a plugin and shortcode and learn to create till the fourth step.

First Step: Create a folder inside your plugin folder and give a unique name to that

Second Step: Create a PHP file with the same name ad the created folder

Third Step: define the plugin

<?php 
/* 
* Plugin Name: CodeMystery's WP Ajax 
* Plugin URI: https://codemystery.com/ 
* Description: Its a sample wordpress Frontend login plugin with shortcode. 
* Version: 0.1 
* Author: Code Mystery 
* Author URI: https://codemystery.com/ 
*/ ?>

Fourth step: define a shortcode and make a form inside the function called by the shortcode and call a javascript function load_my_ajax() on keyup of the field

//adding the shortcode for the login form
add_shortcode("HSWP_FORM", "cm_form");

function cm_form(){
	$output_form = hirans_form_perform();
	return $output_form;
}

function cm_form_perform(){
?>
<div id="my_ajax_responce"></div>
<form action="" method="post">
    <div class="form-group">
      <label for="usr">Name:</label>
      <input type="text" class="form-control" id="usr" onkeyup="load_my_ajax();">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd">
    </div>
    <div class="form-group">
      <input type="submit" name="frm_sbmt" class="form-control" id="pwd" value="Submit">
    </div>
</form>
<?php
}

Fifth Step: Now create a js folder and create a js file inside the js folder and include an ajax file by using wp_enqueue_script script here my_ajax_url will define the ajax URL object and ajax_url will be used to get the URL for ajax operation here using WordPress admin-ajax.

function add_ajax_file(){
	wp_enqueue_script('my-ajax',plugins_url('/js/ajax.js', __FILE__),array('jquery'),true);
	// in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
	wp_localize_script( 'my-ajax', 'my_ajax_url',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' )
    ) );
}
add_action('wp_enqueue_scripts','add_ajax_file');

now write the javascript function to handle the ajax operation here my_ajax_function is the function to be called to perform the ajax operation.

function load_my_ajax($){
	var id = '1';
	jQuery.ajax({
        method: "POST",
        url: my_ajax_url.ajax_url,
        data: { 'action': 'my_ajax_function', 'id': id },
        success: function(response){
        	console.log('Success AJAX Call :( /// Return Data: ' + response + ' ) ');
        }
      })
      .done(function( data ) {
        jQuery( '#my_ajax_responce' ).html(data);
      })
      .fail(function( data ) {
        console.log('Failed AJAX Call :( /// Return Data: ' + data);
      });
}

Seventh Step: now create my_ajax_function function and write some code in the plugin PHP file.

function my_ajax_function(){
	$id = $_POST['id'];
	echo $id;
	wp_die();
}
add_action( 'wp_ajax_my_ajax_function', 'my_ajax_function' );
add_action( 'wp_ajax_nopriv_my_ajax_function', 'my_ajax_function' );

Now your plugin is ready to use and you can install the plugin and run the form by using the shortcode [HSWP_FORM]

Thanks for Reading