Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
REST APIs for Absolute Beginners
Tom J Nowell
July 23, 2017
Technology
0
630
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
590
Composer_and_WordPress__1_.pdf
tarendai
0
56
VVV 2
tarendai
0
440
WordCamp Europe 2016 - Handling Anxiety
tarendai
1
200
Escape From New York
tarendai
0
540
WP The Right Way
tarendai
0
870
Code Deodorant 2014
tarendai
1
560
Adv WP CLI
tarendai
0
520
WP CLI
tarendai
0
410
Other Decks in Technology
See All in Technology
オンプレk8sとEKSの並行運用の実際
ch1aki
0
320
もし本番ネットワークをまるごと仮想環境に”コピー”できたらうれしいですか? / janog51
corestate55
0
400
Periodic Multi-Agent Path Planning
hziwara
0
160
CES_2023_FleetWise_demo.pdf
sparkgene
0
130
NGINXENG JP#2 - 2-NGINXの動作の詳細
hiropo20
1
140
Raspberry Pi Camera 3 介紹
piepie_tw
PRO
0
170
MoT/コネヒト/Kanmu が語るプロダクト開発xデータ分析 - 分析から機械学習システムの開発まで一人で複数ロールを担う大変さ
masatakashiwagi
3
800
ECSコスト削減のブレイクアウトセッションを聴いてきた話 / joining a breakout session on reducing costs with ECS
yayoi_dd
0
140
書籍を書きました。 そう、VS Codeで。
takumanakagame
4
4.6k
NGINXENG JP#2 - 4-NGINX-エンジニアリング勉強会
hiropo20
0
130
Deep Neural Networkの共同学習
hf149
0
360
メドレー エンジニア採用資料/ Medley Engineer Guide
medley
3
5.2k
Featured
See All Featured
Infographics Made Easy
chrislema
235
17k
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.2k
Rails Girls Zürich Keynote
gr2m
87
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
217
21k
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
How to Ace a Technical Interview
jacobian
270
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
1.2k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
Thoughts on Productivity
jonyablonski
49
2.7k
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