WordPress Plugin Development Tutorial Using Ajax

wordpress ajax is very easy to implement and in this tutorial we will learn how to make a 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 fourth step.

First Step: create a folder inside your plugin folder and give a unic name to that

Second Step: create a php file with 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 short code 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 a 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 for 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 rady to use and you can install the plugin and run the form by using the shortcode [HSWP_FORM]

Thanks for Reading

Share The Post On -

Add a Comment

Your email address will not be published. Required fields are marked *

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