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
810
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
770
Composer_and_WordPress__1_.pdf
tarendai
0
62
VVV 2
tarendai
0
600
WordCamp Europe 2016 - Handling Anxiety
tarendai
1
360
Escape From New York
tarendai
0
630
WP The Right Way
tarendai
0
970
Code Deodorant 2014
tarendai
1
630
Adv WP CLI
tarendai
0
610
WP CLI
tarendai
0
500
Other Decks in Technology
See All in Technology
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
190
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
720
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.2k
簡単に始めるSnowflakeの機械学習
nayuts
1
190
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Unsuck your backbone
ammeep
666
57k
BBQ
matthewcrist
82
9k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Design by the Numbers
sachag
277
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
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