Full Code Of Same Page Ajax Post Request WordPress Custom Plugin

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. Besides providing us with 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 one main file that’s all means you do not 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 a file called WP-Testing-Plugin.php, which will be the main file of our plugin.

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

<?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
*/

/*____________WP Testing Plugin Admin/Script_____________*/
function wp_testingPlugin_admin() {   

echo "      
    <button id='ClickHere'>Click Here To Hit The Ajax</button>
    <div id='showReturnDataHereOnly'>_________</div>

    <script type='text/javascript'>
        jQuery('#ClickHere').click(function(){
            jQuery.ajax({
                type: 'post',
                data: { 
                    'my_plugin_ajax_submit': 'now',
                    'nonce' : '".wp_create_nonce( 'my_plugin_ajax_submit' )."'
                },
                success: function(response) { 
                    jQuery('#ClickHere').text('Ajax Hitted Successfully');                        
                    // Get The Selected DIV Response Only From This Whole Page
                    jQuery('#showReturnDataHereOnly').html(jQuery('#my_plugin_ajax_submit_data',response).html());
                },
                error: function(response) { 
                    jQuery('#ClickHere').text('Error! ');
                    jQuery('#showReturnDataHereOnly').html('<div>Error</div>');
                },
            });
        });
    </script>
";

// Get The Ajax Hit And After Validating, Forward It To Another Function
if (isset($_POST['my_plugin_ajax_submit']))
{
    if ( wp_verify_nonce( $_POST['nonce'], 'my_plugin_ajax_submit' ) )
    {
        my_plugin_ajax_submit();   
    }
}

}

// Desired Function To Be Run After Ajax Hit
function my_plugin_ajax_submit() {
    echo "<div id='my_plugin_ajax_submit_data'>";       
      echo "<b><u><i>Function Hitted.</i></u></b><br/>";
      echo "<b><u><i>Working Fine.</i></u></b><br/>";
      echo "<b><u><i>Data Returned.</i></u></b><br/>";
    echo '</div>';
    // Below Commented Code Is Working Fine After Clicking Upper Button And Getting An Email.
    //wp_mail( 'user@domain.com', 'my_plugin_ajax_submit() fired', time());
    //return true;
}
/*__________________________________________________________________*/


/*____________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');
/*__________________________________________________________________*/
?>

Last Words:

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. If you do and come up with sometimes useful, don’t forget that you can distribute it freely to others via the WordPress plugin directory. Have you already created your first plugin or plan on creating one soon? If so, we would love to hear about it in the comments below!