Tutorial to learn and using wordpress ajax easily, a simple example to make wordpress ajax request, and set cookie using wordpress ajax call.

WordPress Ajax

We will learn wordpress ajax and set new custom cookie using ajax call.

Ajax Actions

Must to use this actions:

add_action('wp_ajax_my_ajax_function', 'my_ajax_function_callback');
add_action( 'wp_ajax_nopriv_my_ajax_function', 'my_ajax_function_callback' );

And ajax callback code (new cookie):

function my_ajax_function_callback() {
 $hour = 24; // 24 = 24 hours, change number if you want!
 $calc = 3600 * $hour;
 setcookie("my-custom-cookie", "my-ajax-cookie", time() + $calc, '/');
}

Note: “my_ajax_function” this is your function name, change it to for example “my_custom_cookie”, full code will be like this:

add_action('wp_ajax_my_custom_cookie', 'my_custom_cookie_callback');
add_action( 'wp_ajax_nopriv_my_custom_cookie', 'my_custom_cookie_callback' );
function my_custom_cookie_callback() {
 $hour = 24; // 24 = 24 hours, change number if you want!
 $calc = 3600 * $hour;
 setcookie("my-custom-cookie", "my-ajax-cookie", time() + $calc, '/');
}

Ajax Button

This is our ajax button “my-button”, HTML code:

<div class="my-button">Set Cookie!</div>

Ajax Script

We will using jQuery to make wordpress ajax call, now when user clicked on “my-button”, will be add new cookie, our ajax script will be in wp_head action:


function ajax_in_head(){
?>
<script type="text/javascript">
jQuery(document).ready(function() {

jQuery('.my-button').click(function(){

var data = {
action: 'my_custom_cookie'
};

jQuery.post('<?php echo admin_url( "admin-ajax.php" ); ?>', data);

});

});
</script>
<?php
}
add_action('wp_head', 'ajax_in_head');

Note: this is our action name “action: ‘my_custom_cookie'”, because our function name is “my_custom_cookie”.

Ajax In JavaScript File

If you do not want to use “wp_head” action, you can add ajax script in javascript file, using wp_enqueue_scripts action:

function get_ajax_url(){
wp_enqueue_script( 'my-ajax-handle', plugins_url( '/js/ajax-script.js', __FILE__ ), array('jquery'), false, false );
wp_localize_script( 'my-ajax-handle', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', 'get_ajax_url');

Notes: “my-ajax-handle” this is your ajax handle name, if you change it from “wp_enqueue_script()” function, must be change it too from “wp_localize_script()” function, every ajax handle for one ajax file only, and “wp_enqueue_script()” function must to be before “wp_localize_script()” function, and this is “my_ajax_object” your ajax url variable, for example:

function get_ajax_url(){
wp_enqueue_script( 'cookie-handle', plugins_url( '/js/ajax-script.js', __FILE__ ), array('jquery'), false, false );
wp_localize_script( 'cookie-handle', 'cookie_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', 'get_ajax_url');

Now in “ajax-script.js” file, paste this code:

jQuery(document).ready(function() {
jQuery('.my-button').click(function(){
var data = {
action: 'my_custom_cookie' // because your function name is "my_custom_cookie"
};
jQuery.post(cookie_object.ajax_url, data); // "cookie_object.ajax_url" is your ajax url
});
});

Full code:


function get_ajax_url(){
wp_enqueue_script( 'cookie-handle', plugins_url( '/js/ajax-script.js', __FILE__ ), array('jquery'), false, false );
wp_localize_script( 'cookie-handle', 'cookie_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', 'get_ajax_url');
/*
function ajax_in_head(){
?>
<script type="text/javascript">
jQuery(document).ready(function() {

jQuery('.my-button').click(function(){

var data = {
action: 'my_custom_cookie'
};

jQuery.post('<?php echo admin_url( "admin-ajax.php" ); ?>', data);

});

});
</script>
<?php
}
add_action('wp_head', 'ajax_in_head');

disable add_action('wp_enqueue_scripts', 'get_ajax_url'); if you want to use wp_head action.
*/
add_action('wp_ajax_my_custom_cookie', 'my_custom_cookie_callback');
add_action( 'wp_ajax_nopriv_my_custom_cookie', 'my_custom_cookie_callback' );
function my_custom_cookie_callback() {
$hour = 24; // 24 = 24 hours, change number if you want!
$calc = 3600 * $hour;
setcookie("my-custom-cookie", "my-ajax-cookie", time() + $calc, '/');
}

Clean? if is not clean, leave a comment.