REST APIs for Absolute Beginners

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

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