Upgrade to Pro — share decks privately, control downloads, hide ads and more …

REST APIs for Absolute Beginners

REST APIs for Absolute Beginners

How to make a basic endpoint, use it on the frontend, and convert existing code

Tom J Nowell

July 23, 2017
Tweet

More Decks by Tom J Nowell

Other Decks in Technology

Transcript

  1. REST APIs for
    Absolute Beginners
    How to make a basic endpoint, use it on the frontend,
    and convert existing code

    View Slide

  2. What are my options?

    View Slide

  3. Admin AJAX?
    add_action("wp_ajax_fruit", "fruit");
    add_action("wp_ajax_nopriv_fruit", "fruit");
    function fruit() {
    echo "bananas";
    exit;
    }
    jQuery.ajax({
    type : "get",
    url : "https://example.com/wp-admin/admin-ajax.php",
    data : { action: "fruit" },
    success: function(response) {
    //
    }
    });

    View Slide

  4. A file in your theme/plugin you call?

    View Slide

  5. REST API Endpoints

    View Slide

  6. Where is the API?
    /wp-json

    View Slide

  7. The rest API is a is a set of
    pages that return JSON instead of HTML
    that have no state

    View Slide

  8. REST actions
    GET - viewing
    POST - adding/updating
    DELETE - deleting

    View Slide

  9. Adding an Endpoint
    add_action( 'rest_api_init', function () {
    register_rest_route( 'tomjn/v1', '/test/', array(
    'methods' => 'GET',
    'callback' => 'tomjn_rest_test'
    ) );
    } );
    function tomjn_rest_test() {
    return "moomins";
    }

    View Slide

  10. /wp-json/tomjn/v1/test

    View Slide

  11. View Slide

  12. Viewing an endpoint
    jQuery.get(
    "https://tomjn.com/wp-json/tom/v1/test",
    function ( data ) {
    console.log( data );
    }
    );

    View Slide

  13. How Do I Accept Parameters?
    function tomjn_rest_test( \WP_REST_Request $request ) {
    return "moomins ".$request["val"];
    }
    /wp-json/tomjn/v1/test?val=1
    "moomins 1"

    View Slide

  14. Converting AJAX calls
    ● Register an endpoint
    ● Use the function WP Admin AJAX uses
    ● Return what you want instead of printing it
    ● Use the request parameter instead of $_GET $_POST etc
    ● Update the URLs in your javascript

    View Slide

  15. A Useful Helper
    wp_enqueue_script( 'wp-api' );

    View Slide

  16. Creating Content
    $.ajax( {
    url: wpApiSettings.root + 'wp/v2/posts',
    method: 'POST',
    beforeSend: function ( xhr ) {
    xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
    },
    data:{
    'title' : 'Hello Moon',
    'content': 'Test post'
    }
    } ).done( function ( response ) {
    console.log( response );
    } );

    View Slide

  17. Updating Content
    $.ajax( {
    url: wpApiSettings.root + 'wp/v2/posts/1',
    method: 'POST',
    beforeSend: function ( xhr ) {
    xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
    },
    data:{
    'title' : 'Updated Moon',
    'content': 'even better post'
    }
    } ).done( function ( response ) {
    console.log( response );
    } );

    View Slide

  18. Deleting Content
    $.ajax( {
    url: wpApiSettings.root + 'wp/v2/posts/1',
    method: 'DELETE',
    beforeSend: function ( xhr ) {
    xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
    }
    } ).done( function ( response ) {
    console.log( response );
    } );

    View Slide

  19. Built in Endpoints
    Posts /wp/v2/posts
    Post Revisions /wp/v2/revisions
    Categories /wp/v2/categories
    Tags /wp/v2/tags
    Pages /wp/v2/pages
    Comments /wp/v2/comments
    Taxonomies /wp/v2/taxonomies
    Media /wp/v2/media
    Users /wp/v2/users
    Post Types /wp/v2/types
    Post Statuses /wp/v2/statuses
    Settings /wp/v2/settings

    View Slide

  20. Useful Things

    View Slide

  21. Adding REST support to CPT
    'show_in_rest' => true,

    View Slide

  22. WP.org REST API Handbook
    https://developer.wordpress.org/rest-api

    View Slide

  23. Rest API Console

    View Slide

  24. View Slide

  25. View Slide

  26. Questions?
    Tom J Nowell
    @tarendai
    https://tomjn.com
    Wordpress.com VIP*
    * we’re hiring

    View Slide