Full Professional Ajax Post Request WordPress Custom Plugin

As per our previous post about Full Code Of Same Page Ajax Post Request WordPress Custom Plugin where we shared a demo plugin code that will contain all the codes like main code, functionals code, ajax javascript on one page that will not make that professional plugin code so here we come with another same feature working example but in professional way of creating and developing WordPress Custom Plugins using Ajax-PHP for any kind of work. As you know that WordPress is a blogging CMS that manages our content like a professional well manager diary that is accessible by everyone easily. To maintain their feature, WordPress provides custom development to make it more beautiful and easy for all users around the world by letting them contribute and add new features into WordPress.

However, instead, os using it for only top features like creating posts and pages, WordPress also offers good support for enhancing site functionality through themes, adds-on, and plugins. In this awesome article, we will share with you a simple and easy Ajax Post request single page WordPress Plugin full code. To move ahead, you must have basic knowledge of WordPress Custom Plugin development and PHP Ajax Requests.

What is Ajax Exactly?

Ajax is a web development technique that stands for Asynchronous JavaScript And XML. It’s used to create dynamic web applications that are interactive and fun. With Ajax, you don’t have to wait for the web page to reload to see a change. Everything’s taken care of automatically in the background without disrupting what you’re doing and will show the user final result as they wanted thereby it enhances user experience.

Why PHP Ajax Is Different From WordPress Ajax?

Ajax with PHP is different or you can say easy because you just have to directly hit the Ajax function that will post and return the PHP file data after processing whereas in WordPress you can hit Ajax but that can not directly hit the PHP file because for security purpose it should go through wp-ajax.php WordPress core file that why it seems different from simple PHP-Ajax coding. Anyway, here we will make it easy and clear for you in one go.

Creating the Plugin:

Let’s start by creating a plugin that will demonstrate the upper logic. One more point is that it will keep all the codes in three main files that’s all means you do need different files to be created in the plugin folder. To create a plugin in WordPress in the wp-content plugins folder, make a folder for the plugin called WP-Testing-Plugin. Inside this, create the below-mentioned files as requested.

In this file, let’s now put the plugin header as follows:

Main Plugin File:

Make a file and name it as main_plugin_file.php then copy the below code and paste there.

<?php
/*
Plugin Name: WP Testing Plugin
Plugin URI: http://www.wordpress.org/WP-Testing-Plugin
Description: A Detailed Description About This Plugin.
Author: Muhammad Hassan
Version: 0.1
Author URI: http://www.wordpress.org
*/

// Calling All PHP File To Load
include('my_functions.php');

/*____________WP Testing Plugin Admin/Script_____________*/
function wp_testingPlugin_admin() {
    echo '
        <form id="searchForm">
            <input name="WhatToSearch" type="text" />
            <input type="submit" value="Search"/>
            <input type="reset" value="Reset"/>
            <div id="showReturnData"></div>
        </form>
    ';
}
/*__________________________________________________________________*/

/*____________WP Testing Plugin Option_____________*/
// Adding "WP Testing Plugin" Menu To WordPress -> Tools
function wp_testingPlugin() {
    //  add_management_page( $page_title, $menu_title, $capability, $menu_slug, $function);                  Menu Under Tools
    add_management_page("WP Testing Plugin By Hassan", "WP Testing Plugin", 'activate_plugins', "WP-Testing-Plugin", "wp_testingPlugin_admin");
}
add_action('admin_menu', 'wp_testingPlugin');
/*__________________________________________________________________*/
?>

Functions File:

Make a file and name it as my_functions.php then copy the below code and paste there.

<?php
add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue() {
wp_enqueue_script( 'ajax-script', plugin_dir_url( __FILE__ ).'my_javascript.js', array('jquery') );
wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
/****************************************************************************/
// Run Search Function
/****************************************************************************/
/* Register This Upper Function When This File Is Loaded To Call By WordPress AJAX */
add_action('wp_ajax_nopriv_SearchFunction', 'ajax_SearchFunction'); // For Web Visitors
add_action('wp_ajax_SearchFunction', 'ajax_SearchFunction'); // For Admin User
function ajax_SearchFunction(){
if($_POST['WhatToSearch'] == ""){
$WhatToSearch = "Nothing";
} else {
$WhatToSearch = $_POST['WhatToSearch'];
}
echo "<div class='success'>SUCCESS: Function Is Working Perfectly And Getting Data ".$WhatToSearch.".</div>";
}
?>

JavaScript:

Make a file and name it as my_javascript.js then copy the below code and paste there.

jQuery(document).ready(function() {
jQuery('#searchForm').on("submit",function(e) {
var incomingData = jQuery('#searchForm').serializeArray();
incomingData.push({name: 'action', value: 'SearchFunction'});
alert(JSON.stringify(incomingData));
jQuery.ajax({
type: 'post',
url: my_ajax_object.ajax_url,
data: incomingData,
success: function(response) {
jQuery('#showReturnData').html(response);
},
error: function(response) {
jQuery('#showReturnData').html('<div">Error</div>');
},
});
return false; // For Not To Reload Page
});
});

Last Words:

Rest you have to do whatever you want to do. It’s a very basic functioning of Ajax in WordPress so you can easily alter it as per your need. Creating WordPress plugins is extremely liberating and a great way to gain a deeper knowledge of how WordPress works and to show your creativity and ideas with the WordPress community. If you haven’t already, We urge you to try your hand at creating a plugin.