WordPress - Call php file Via Ajax and jQuery

There are so many sites now a days showing using ajax for displaying immediate response for every user actions. Obviously WordPress also using Ajax functions , but its available on admin page only, You will be able to note the functions of Comment moderation and Post quick edit and few others. 

So today i loved to show how to use built - in ajax function for your theme or Plugin of WordPress site. Its easy to catch form values and perform operation through your php code and return the response  through ajax and jQuery function.

1. Create form like this

<form id="new_post" name="new_post" method="post" action="" enctype="multipart/form-data">
<fieldset name="name">
<label for="title">Project Title:</label>
<input type="text" id="title" value="" tabindex="5" name="title" size="70"/>
</fieldset>

<!-- post Category -->
<fieldset class="category">
<label for="cat">Area:</label>
<?php wp_dropdown_categories( 'tab_index=10&taxonomy=category&hide_empty=0' ); ?>
</fieldset>

<!-- post Content -->
<fieldset class="content">
<label for="description">Summary/Excerpt/Abstract of Project :</label>
<textarea id="description" tabindex="15" name="description" cols="60" rows="10"></textarea>
</fieldset>

<!-- post tags -->
<fieldset class="tags">
<label for="post_tags">Additional Keywords (comma separated):</label>
<input type="text" value="" tabindex="35" name="post_tags" id="post_tags" />
</fieldset>

<fieldset class="submit">
<input type="submit" value="Post Review" tabindex="40" class="button" name="submit" />
</fieldset>

<input type="hidden" name="action" value="new_post" />
<?php wp_nonce_field( 'new-post' ); ?>

<label for="price">Your Expected Price:</label>
<input type="text" value="" name="price" id="price" />
</form>


2. and write the following line of code into a js file which you created to perform jquery and ajax operations.

jQuery(document).ready(function($) {

//#new_post is replaced with your Form id

$('#new_post').bind('submit', function() {
var form_data = $('#new_post');
var data = form_data.serialize();
data.action = 'mywptuts_post_new' ; // Your php function name here
$.post('/wp-admin/admin-ajax.php',data , function (response) {
alert(response);
});
return false ; 
});

});


3. Then create your php file and add it with add_Actions  function.

// php file
<?php

function mywpwtuts_post_new () {

//your plugin operation of posting form data and ajax operation to show the response

if( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) &&  $_POST['action'] == "new_post") {

$errors = new WP_Error();

$fields = array(

'title',

'features',

'post_tags'

);

foreach ($fields as $field) {

if (isset($_POST[$field])) $posted[$field] = stripslashes(trim($_POST[$field])); else $posted[$field] = '';

}

if ($posted['title'] != null )

$title =  $_POST['title'];

else 

$errors->add('empty_title', __('<strong>Notice</strong>: Please enter a title for your project.', 'kv_project'));

if ($posted['features'] != null) 

$features = $_POST['features'];

else 

$errors->add('empty_features', __('<strong>Notice</strong>: Please enter the features of your project.', 'kv_project'));

 

if ($posted['post_tag'] != null) 

$tags = $_POST['post_tags'];

if(isset( $_POST['cat'] ) ) 

$post_cat = $_POST['cat'];

else 

$errors->add('empty_category', __('<strong>Notice</strong>: Please choose your project category.', 'kv_project'));

//$errors = apply_filters( 'wp_insert_post', $errors, $posted['user_login'], $posted['user_email'] );                        

if ( !$errors->get_error_code() ) { 

$new_post = array(

'post_title' => $title,

'post_content' => $features,

'post_category' =>   $post_cat,  

'tags_input' => array($tags),

'post_status' => 'pending'   

);

$pid = wp_insert_post($new_post);

      wp_set_post_tags($pid, $_POST['post_tags']);

}

if( $pid) {

echo 'Your post has been posted and Waiting for Admin Approval' ;

} else {

echo ' Your post has not been posted , check and fill all necessary fields' ;

}

}

}


add_action("wp_ajax_nopriv_mywpwtuts_post_new ", "mywpwtuts_post_new ");
add_action("wp_ajax_mywpwtuts_post_new ", "mywpwtuts_post_new ");

?>

thats it your code is ready to communicate with your php and ajax functions.