I am trying to learn, how to use Ajax in WordPress with proper way. This is what I learned:

Step 1: Create Ajax file and register it using wp_enqueue_script.

function wpdocs_theme_name_scripts() {
    wp_enqueue_script( 'script-name', get_stylesheet_directory_uri() . '/js/ajxfile.js', array(), '1.0.0', true );
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

Step 2: Use ajax Like this in ajxfile.js:

$( document ).ready(function() {

$('#id').on('click',function (e){       
    alert("Its Working");
    var up = 1;
    var id = $( "#id" ).data( "user_id" );
            type: "POST",
                url: "runcode.php",
                data: {up:up, id:id},


STEP 3: adding HTML in page:

  <a href="#" id="id" data-user_id="<?php echo $user_id = get_current_user_id(); ?>" 
  data-post_id="<?php echo $post_id = get_the_ID(); ?>">
         <i class="fa fa-thumbs-up" aria-hidden="true"></i>

Every time someone click on the link Its successfully alert "Its working" statement. Now I want to retrieve that data and want to add it in user meta. But its confusing me. And whats that nonce thing is? Can anyone guide me to right direction?

  • 1
    nonce is a unique identifier which later you can validate with php to ensure that this is a valid and clean request, it is generated by the function wp_create_nonce() and verified either by wp_verify_nonce() or with $_GET parameter, or the prefered way filter_input(INPUT_GET, '$nonce');
    – knif3r
    Jul 8, 2016 at 15:47
  • But why WordPress recommended it? and how should I use it with ajax? Jul 8, 2016 at 15:49
  • Worpdress recommend it because it is good, no - the best way to verify if your request is coming from where you want it and how you want it. Using it with ajax - you create the nonce in a hidden input field for example and get it with js so you can pass it with the other data of the request, then you use GET Parameter in php to validate it
    – knif3r
    Jul 8, 2016 at 15:52
  • codex.wordpress.org/Function_Reference/check_ajax_referer Here you can find some good examples of how and why to use it. :)
    – knif3r
    Jul 8, 2016 at 15:55
  • 1
    You are expected to research, at least on our site, before you ask a question. We have covered this so many times.
    – fuxia
    Jul 8, 2016 at 17:47

1 Answer 1


Now I got it! WordPress is just awesome. Also Thank you knif3r, your suggestions help me lot. I am trying to explain it in my words. Please correct me, if I am wrong.

What is nonce?

Nonce is something like security hash to prevent attacks and mistakes. It creates unique identifiers to check if the ajax request is coming from website or not. In WordPress words

A nonce is a "number used once" to help protect URLs and forms from certain types of misuse, malicious or otherwise. WordPress nonces aren't numbers, but are a hash made up of numbers and letters. Nor are they used only once, but have a limited "lifetime" after which they expire.

How to use it?

  1. First we need to add our js file properly using wp_enqueue_script(). Something like this:

     function wpdocs_theme_name_scripts() {
         wp_enqueue_script( 'script-name', get_stylesheet_directory_uri().
             '/js/ajxfile.js', array(), '1.0.0', true );
     add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

We register our ajxfile.js file with the name script-name. Now its loading on all the pages of our wordpress.

  1. Now we need to use wp_localize_script() to declare our variables and here we add our nonce to used it in functions.

     function wpdocs_theme_name_scripts() {
         wp_enqueue_script( 'script-name', get_stylesheet_directory_uri() . 
             '/js/ajxfile.js', array(), '1.0.0', true );
         wp_localize_script('script-name', 'ajax_var', array(
             'url' => admin_url('admin-ajax.php'),
             'nonce' => wp_create_nonce('ajax-nonce')

We successfully register and localize our script.

  1. Be sure to pass the nonce data in your ajax call in ajxfile.js:

     /* global ajax_var */
     $.ajax( {
         url: ajax_var.url,
         type: 'post',
         data: {
             action: 'custom_script_name',
             nonce: ajax_var.nonce,   // pass the nonce here
             moredata: 'whatever',
         success( data ) {
             if ( data ) {
                 // etc...
     } );
  2. Now we want to bind our function with our script. So I used this

     add_action('wp_ajax_nopriv_custom_script_name', 'custom_php_ajax_function');    
     add_action('wp_ajax_custom_script_name', 'custom_php_ajax_function');

We are using wp_ajax_nopriv_ & wp_ajax_ to bind our functions with wordpress hooks. The second hook is fired when a user is logged in and the first one when they are not.

  1. Our Function is will be like this

     function custom_php_ajax_function() {
         // Check for nonce security      
         if ( ! wp_verify_nonce( $_POST['nonce'], 'ajax-nonce' ) ) {
             die ( 'Busted!');

Our function will check if ajax data is sending nonce hidden data with other parameters. If it doesn't, then it will fire an error. This can really help to prevent ajax attacks. Nonce data is a hidden value and must need to send with other parameters.

How to check if it is working or not?

  • Remove 'nonce' => wp_create_nonce('ajax-nonce') from wpdocs_theme_name_scripts() and click on the link. It will show an error.
  • Now Remove security check from our function and click on link. It will work.

This shows that our function with security check of nonce will never work if there is no nonce data. Its hidden so no one else can use it. And if no one knows it, then no matter how many time they run that ajax, our function is not going to respond them.

Sorry for my poor English and bad explanation. Just trying to help. Please let me know if I am missing something or done something wrong.

  • 1
    One little thing: wp_ajax_nopriv_ is for users that have NOT logged in (they have "no privileges"), and wp_ajax_ is for users that have logged in. You stated it the other way around.
    – scott
    Jul 8, 2016 at 18:02
  • It seems you got it right :) Just remember to use filtering options when you use POST/GET/REQUEST requests like filter_input(INPUT_POST 'datasource'); or other php function like htmlspecialchars() and esc_attr() or esc_html when you use hidden fields to pass data to js and you are good to go.
    – knif3r
    Jul 8, 2016 at 18:29
  • Thank You Scott, I update the answer. Yes knif3r, Thank you for suggestion. I will remember it. Jul 9, 2016 at 7:36
  • 1
    good answer. I just added the step where the nonce data needs to be passed in the $.ajax call Jan 27, 2021 at 23:48
  • Very well explained - thank you
    – Clinton
    Mar 15, 2021 at 15:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.