You Don’t Need “wp_localize_script()” to Get “admin-ajax.php”

The most common method to use AJAX in WordPress is using admin-ajax.php + WordPress hook system.

And one of the recommended method to get this file URL is by using wp_localize_script(). This method is explained in details in my other tutorial WordPress AJAX for Beginners.

However, there is an alternative method.

wp.ajax.post( action, data );

WordPress actually have a neat AJAX utility, which is basically a wrapper for jQuery’s ajax APIs.

You can read the source code in wp-includes/js/wp-util.js.

To make it easier to explain, I just going to give you a simple example for comparison:

Using Localize Script:

/* Load Script */
add_action( 'wp_enqueue_scripts', function(){
    $url = trailingslashit( plugin_dir_url( __FILE__ ) );
    wp_register_script( 'my_ajax_script', $url . 'script.js', array( 'jquery' ), '0.1.0', true );
    wp_localize_script( 'my_ajax_script', 'my_ajax_url', admin_url( 'admin-ajax.php' ) );
} );

/* AJAX Callback */
add_action( 'wp_ajax_my_ajax_action', function(){
    $first_name = isset( $_POST['first_name'] ) ? $_POST['first_name'] : 'N/A';
    $last_name = isset( $_POST['last_name'] ) ? $_POST['last_name'] : 'N/A';
    echo "Your name is {$first_name} {$last_name}";
    wp_die();
} );

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

    $.ajax({
        method : 'POST',
        url    : my_ajax_url,
        data   : {
            action     : 'my_ajax_action', // "wp_ajax_*" action hook
            first_name : 'John',
            last_name  : 'Cena',
        },
    })
    .done( function( response ) {
        alert( response );
    })
    .fail( function() {
        alert( "error" );
    })
});

Pretty simple basic example, and this is how to do it using wp.ajax:

/* Load Script */
add_action( 'wp_enqueue_scripts', function(){
    $url = trailingslashit( plugin_dir_url( __FILE__ ) );
    wp_register_script( 'my_ajax_script', $url . 'script.js', array( 'jquery', 'wp-util' ), '0.1.0', true );
} );

/* AJAX Callback */
add_action( 'wp_ajax_my_ajax_action', function(){
    $first_name = isset( $_POST['first_name'] ) ? $_POST['first_name'] : 'N/A';
    $last_name = isset( $_POST['last_name'] ) ? $_POST['last_name'] : 'N/A';
    $response = "Your name is {$first_name} {$last_name}";
    wp_send_json_success( $response );
} );

/* AJAX */
jQuery( document ).ready( function( $ ){

    wp.ajax.post( 'my_ajax_action', {
        first_name : 'John',
        last_name  : 'Cena',
    } )
    .done( function( response ) {
        alert( response );
    } )
    .fail( function() {
        alert( "error" );
    } );

});

What’s Different?

1. No Need for Localize Script to get admin ajax.

In my opinion it’s easier and cleaner method. All we need to do is to load “wp-util” as our script dependency.

2. Response in JSON

It is designed for JSON, and to use in combo with:

• wp_send_json();
• wp_send_json_success();
• wp_send_json_error();

I think It’s less flexible but for most use case we can easily replace our jQuery AJAX with cleaner wp.ajax. But we can also use wp.ajax.send that offer more flexibility.

3. Streamlined Method

Of course, WordPress is updated regularly, So, we will also get improvements (probably also new features) in the future for using this method.