REST APIs for Absolute Beginners

Transcript

1. 1.

   REST APIs for Absolute Beginners How to make a basic

   endpoint, use it on the frontend, and convert existing code
2. 2.

   What are my options?

3. 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) { // } });
4. 4.

   A file in your theme/plugin you call?

5. 5.

   REST API Endpoints

6. 6.

   Where is the API? /wp-json

7. 7.

   The rest API is a is a set of pages

   that return JSON instead of HTML that have no state
8. 8.

   REST actions GET - viewing POST - adding/updating DELETE -

   deleting
9. 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"; }
10. 10.

    /wp-json/tomjn/v1/test

11. 11.

    None
12. 12.

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

    console.log( data ); } );
13. 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"
14. 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
15. 15.

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

16. 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 ); } );
17. 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 ); } );
18. 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 ); } );
19. 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
20. 20.

    Useful Things

21. 21.

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

22. 22.

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

23. 23.

    Rest API Console

24. 24.

    None
25. 25.

    None
26. 26.

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

    hiring