• Tweet

When using WordPress as a CMS, situations often arise we need to display the contents of a page without actually having to reload the page in the browser that time we can use AJAX. It is the technology that lets us display, add or update content dynamically.

What Is AJAX?
AJAX stands for Asynchronous Javascript And XML. It is a way of programming for the Web that gets rid of the hourglass. Data, content, and design are merged together into a seamless whole. If we want to a page on our website where users can modify their profile, we could use AJAX to update a user’s profile without reloading the page. When the user clicks the button, the data they have entered into the form is sent via AJAX to the processing script, and display “data saved”. You can then output that data to the user by inserting it onto the page. Google Docs utilizes this type of technology when saving our work every few minutes.

How AJAX Works In WordPress
Ajax technology is actually fairly simple to describe. Every AJAX request goes through the admin-ajax.php file in the wp-admin folder. Each request needs to supply at least one piece of data (using the GET or POST method) called action. Based on this action, the code in admin-ajax.php creates two hooks, wp_ajax_my_action and wp_ajax_nopriv_my_action, where my_action is the value of the GET or POST variable action. Adding a function to the first hook means that that function will fire if a logged-in user initiates the action. Using the second hook, you can cater to logged-out users separately. Today, Ajax is supported in some form by most visual web browsers. This technology is being adopted by all sorts of web sites and WordPress is no exception.

Implementing AJAX In wordPress without a Plugin:

Today we will create a submit button in wordpress site which we’ll use to inject a greeting message from a hidden field into a created test div. Now we’re going to show you how to implement this in your WordPress theme.

1. First we will create a html code snippet :

Put this code in the WordPress template you want to work with.

<p> <input type="hidden" name="welcomemsg" id="welcomemsg" value="Happy Coding!" />  
<input type="submit" id="PleaseClickHere" />  
<div id="division1">  
</div></p>  
<input type="hidden" name="welcomemsg" id="welcomemsg" value="Happy Coding!" />
 <input type="submit" id="PleaseClickHere" />
 <div id="division1">
 </div>

2. Create a js file to respond Ajax :
Create ajax.js file in your wp-content/themes/name-of-your-theme/ajaxcode/ directory which will respond to the Ajax calls. Add this code in ajax.js file-

jQuery(document).ready(function() {  
var welcomemsg = jQuery("#welcomemsg").val();  
jQuery("#PleaseClickHere").click(function(){ jQuery.ajax({  
type: 'POST',  
url: 'http://www.yoursitename.com/wp-admin/admin-ajax.php',  
data: {  
action: 'AjaxFunction',  
welcomemsg: welcomemsg,  
},  
success: function(data, textStatus, XMLHttpRequest){  
jQuery("#division1").html('');  
Query("#division1").append(data);  
},  
error: function(MLHttpRequest, textStatus, errorThrown){  
alert(errorThrown);  
}  
});  
}));  
});  
jQuery(document).ready(function() {
var welcomemsg = jQuery("#welcomemsg").val();
jQuery("#PleaseClickHere").click(function(){ jQuery.ajax({
type: 'POST',
url: 'http://www.yoursitename.com/wp-admin/admin-ajax.php',
data: {
action: 'AjaxFunction',
welcomemsg: welcomemsg,
},
success: function(data, textStatus, XMLHttpRequest){
jQuery("#division1").html('');
jQuery("#division1").append(data);
},
error: function(MLHttpRequest, textStatus, errorThrown){
alert(errorThrown);
}
});
}));
});

3. Adding the Java Script File to the Theme :
Now we will be adding the javascript file to our theme. By this method the java script file will be included when the page is loaded. Add this code in your functions.php file.

function add_myjscode(){  
wp_enqueue_script( 'ajax-implementation.js', get_bloginfo('template_directory') . "/scripts/ajax-implementation.js", array( 'jquery' ) );  
}  
add_action( 'init', 'add_myjscode' );  
function add_myjscode(){
wp_enqueue_script( 'ajax.js', get_bloginfo('template_directory') "/ajaxcode/ajax.js", array( 'jquery' ) );
}
add_action( 'init', 'add_myjscode' );

4. Adding Some code to the function.php File :

This Ajax function should also be created in the functions.php file.

function AjaxFunction(){  
$welcomemsg = $_POST['welcomemsg '];  
$results = "<h2>".$welcomemsg."</h2>";  
die($results);  
 }  
add_action( 'wp_ajax_nopriv_ AjaxFunction', 'AjaxFunction' );  
add_action( 'wp_ajax_ AjaxFunction', 'AjaxFunction' );  
function AjaxFunction(){
$welcomemsg = $_POST['welcomemsg '];
$results = "<h2>".$welcomemsg."</h2>";
die($results);
}
add_action( 'wp_ajax_nopriv_ AjaxFunction', 'AjaxFunction' );
add_action( 'wp_ajax_ AjaxFunction', 'AjaxFunction' );

Let me explain the code briefly. A function is created to execute when the #PleaseClickHere button is clicked (from our HTML snippet in step 1). Within the same function, we have captured our hidden filed value and then added the jQuery ajax() function using some mandatory and optional parameters.
The easiest way to work with Ajax and WordPress is to pass the Ajax functions to the admin-ajax.php file located in the wp-admin folder. WordPress handles all the Ajax functions through this file. You have to put the code in your functions.php file.