Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
REST APIs for Absolute Beginners
Search
Tom J Nowell
July 23, 2017
Technology
0
950
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
Share
More Decks by Tom J Nowell
See All by Tom J Nowell
Using Blocks Outside The Editor
tarendai
0
940
Composer_and_WordPress__1_.pdf
tarendai
0
72
VVV 2
tarendai
0
740
WordCamp Europe 2016 - Handling Anxiety
tarendai
1
450
Escape From New York
tarendai
0
690
WP The Right Way
tarendai
0
1k
Code Deodorant 2014
tarendai
1
700
Adv WP CLI
tarendai
0
680
WP CLI
tarendai
0
640
Other Decks in Technology
See All in Technology
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
1
570
ロールが細分化された組織でSREは何をするか?
tgidgd
1
460
スプリントゴール未達症候群に送る処方箋
kakehashi
PRO
1
130
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
680
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
210
Building GoReleaser - from shell script to paid product
caarlos0
0
180
Microsoft Fabric ガバナンス設計の一歩目を考える
ryomaru0825
1
150
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
710
スプリントレビューを効果的にするために
miholovesq
3
530
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
5
800
無理しない AI 活用サービス / #jazug
koudaiii
0
110
"Découvrir le Liberland"
rlifchitz
0
120
Featured
See All Featured
Visualization
eitanlees
146
16k
Typedesign – Prime Four
hannesfritz
42
2.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
A designer walks into a library…
pauljervisheath
207
24k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Side Projects
sachag
455
43k
GitHub's CSS Performance
jonrohan
1031
460k
Transcript
REST APIs for Absolute Beginners How to make a basic
endpoint, use it on the frontend, and convert existing code
What are my options?
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) { // } });
A file in your theme/plugin you call?
REST API Endpoints
Where is the API? /wp-json
The rest API is a is a set of pages
that return JSON instead of HTML that have no state
REST actions GET - viewing POST - adding/updating DELETE -
deleting
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"; }
/wp-json/tomjn/v1/test
None
Viewing an endpoint jQuery.get( "https://tomjn.com/wp-json/tom/v1/test", function ( data ) {
console.log( data ); } );
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"
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
A Useful Helper wp_enqueue_script( 'wp-api' );
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 ); } );
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 ); } );
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 ); } );
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
Useful Things
Adding REST support to CPT 'show_in_rest' => true,
WP.org REST API Handbook https://developer.wordpress.org/rest-api
Rest API Console
None
None
Questions? Tom J Nowell @tarendai https://tomjn.com Wordpress.com VIP* * we’re
hiring